CSS选择器嵌套规范

应该尽可能避免选择器嵌套。

例外

在最外层选择器中嵌套伪类和伪元素是被允许,也是受推荐的。

1
2
3
4
5
6
7
8
9
10
11
.foo {
color: red;
&:hover {
color: green;
}
&::before {
content: 'pseudo-element';
}
}

使用选择器嵌套选择伪类和伪元素不仅仅有道理的(因为它的处理功能与选择器紧密相关),而且有助于保持总体的一致性。
当然,如果使用类似 .is-active 类名来控制当前选择器状态,也可以这样使用选择器嵌套。

1
2
3
4
5
6
7
.foo {
// ...
&.is-active {
font-weight: bold;
}
}

这并不是最重要的,当一个元素的样式在另一个容器中有其他指定的样式时,可以使用嵌套选择器让他们保持在同一个地方。

1
2
3
4
5
6
7
.foo {
// ...
.no-opacity & {
display: none;
}
}

坚持原创技术分享,您的支持将鼓励我继续创作!