CSS Nesting 原生嵌套语法

语法

类似与Sass嵌套语法，

parent {
  /* 父样式 */
  child {
    /* 父级的子样式 */
  }
}

parent {
  /* 父样式 */
  & child {
    /* 父级的子样式 */
  }
}

浏览器均会把以上两个样式表解析为以下样式

parent {
  /* 父样式 */
}
parent child {
  /* 父级的子样式 */
}

带不带 & 嵌套选择器的区别

如果子样式中不加&，浏览器解析式会默认加上父样式，并且会添加空格。

以下例子中.b类选择器没有加&，浏览器会自动解析为.a .b。

& .b和.b效果一致。

.a {
  /* 带有 class="a" 元素的样式 */
  .b {
    /* 带有 class="b"，且为 class="a" 元素的子元素的样式 */
  }
  &.b {
    /* 带有 class="a b" 元素的样式 */
  }
}

浏览器会解析为

/* 浏览器会将其分析为 */
.a {
  /* 带有 class="a" 元素的样式 */
}
.a .b {
  /* 带有 class="b"，且为 class="a" 元素的子元素的样式 */
}
.a.b {
  /* 带有 class="a b" 元素的样式 */
}

& 嵌套选择器的优先级

&嵌套选择器的优先级由它所关联的选择器列表当中优先级最高的选择器决定。这与:is()函数的优先级计算方式一致。

在下面的示例中，ID选择器（#a）的优先级是1-0-0，而类型选择器（b）的优先级是0-0-1。&嵌套选择器和:is()伪类均有1-0-0的优先级，尽管ID选择器#a从未使用。

类选择器.foo的优先级是0-1-0。经过计算得出，& c的总优先级是1-0-1，而.foo c的优先级是0-1-1，意味着 color: blue; 是最后赢家。

<b class="foo">
  <c>蓝色文字</c>
</b>

& 嵌套语法

#a, b {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}

is() 语法

:is(#a, b) {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}

参考文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_nesting

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity