}
自定义选择器
自定义选择器通过@custom-selector来定义，后面跟随一个:–接着是自定义选择器的名称，后面是需要定义的选择器，多个用逗号隔开
@custom-selector :--heading h1, h2, h3, h4, h5, h6;这样，:–heading就成为一个可以使用的选择器
:--heading{
margin: 0;
}
h1, h2, h3, h4, h5, h6｛
margin: 0;
｝上面两段代码的效果相同
选择器嵌套
CSS规则包含许多重复的内容
table.colortable td {
text-align:center;
}
table.colortable td.c {
text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
border:1px solid black;
}
table.colortable th {
text-align:center;
background:black;
color:white;
}使用嵌套语法后，代码如下
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}当使用嵌套样式规则时，必须能够引用由父规则匹配的元素; 毕竟是整个嵌套点。为了达到这个目的，这个规范定义了一个新的选择器，即嵌套选择器，写成ASCII符号＆
当在嵌套样式规则的选择器中使用时，嵌套选择器表示由父规则匹配的元素。在任何其他情况下使用时，它什么都不代表。（也就是说，它是有效的，但不匹配任何元素）
[注意]&嵌套选择符的两种错误写法如下所示
.foo {
color: red;
.bar & { color:blue; }
}
.foo {
color: red;
&.bar, .baz { color: blue; }
}【@nest】
为了解决上面的嵌套选择符&的脆弱，可以使用@nest选择符，@nest可适用范围更广，只要与嵌套选择符&共同作用即可
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
//等价于
.foo { color: red; }
.foo > .bar { color: blue; }.foo {
color: red;
@nest .parent & {
color: blue;
}
}
//等价于
.foo { color: red; }
.parent .foo { color: blue; }
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
//等价于
.foo { color: red; }
:not(.foo) { color: blue; }
[注意]@nest选择符的两种错误写法如下所示
.foo {
color: red;
@nest .bar {
