浏览器支持原生嵌套了！

前言

之前在 LESS、SASS 等预处理器中嵌套写法，现在原生 css 竟然支持了哈，从 chrome112 开始支持！下面尝鲜看看语法！

CSS 原生嵌套语法

div {&> p {color: red;}

    &:hover {color: yellow;}
}

其语法规则大致如下：

parentRule {
  /* parent rule style properties */
  & childRule {/* child rule style properties */}
}

注意点

    
CSS 
        Haorooms
    

上面的 html 这么写没有问题

div {
    border: 1px solid #000;

    .g-h3 {
        color: red;

        .g-span {color: blue;}
    }
}

假如如下：

div {
    border: 1px solid #000;

    h3 {
        color: red;

        span {color: blue;}
    }
}

这么写不生效。需要如下写法

div {
    border: 1px solid #000;

    & h3 {
        color: red;

        & span {color: blue;}
    }
}

在嵌套中使用伪元素和伪类

div {
  /* ... */
  &:hover {color: red;}

  &:is(.content, footer) {padding: 16px;}

  &::before {
    content: "";
    /* ... */
  }
}

这个写法和 css 预处理器一样的。

小结

css 支持原生嵌套功能很强大，基本可以替代 sass 和 less，但是注意的是要用 class 类，纯标签的化，需要 &