:not是唯一具有良好兼容性的逻辑伪类
其优先级不是类,而是由其括号中内容决定。
:not括号中不能支持多个选择器和选择器级联,只能传入单个选择器
全局否定的逻辑错误:
例如希望除了<article>标签下的<p>元素的margin值都是0，
:not(article) p {
margin: 0;
}
看上去没有问题，但实际上:not(article) p语义是，如果<p>元素的祖先元素的标签名不是article，则margin值是0。
<article>
<section>
<p>margin此时也是0！<p>
</section>
</article>
此时，虽然<p>在<article>内，但由于同时也在<section>元素内，于是匹配了:not(article) p这个选择器，导致出现意料之外的样式表现。
正确的书写应该是：
p {
margin: 0;
}
article p {
margin: 1em 0;
}
或者
:not(article) > p {
margin: 0;
}
网友评论