CSS 伪类选择器 :not()
CSS About 1,191 words概念
:not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
语法
:not(选择器列表) {
/* ... */
}
示例
第一段P字体加粗。
不是strong标签和b标签带important类选择器的，p的直接子元素颜色为绿色。
p:not(.irrelevant) {
font-weight: bold;
}
p > strong,
p > b.important {
color: crimson;
}
p > :not(strong, b.important) {
color: green;
}
<p>
<b>Mars</b> is one of the most Earth-like planets. <b>Mars</b> day is almost
the same as an Earth day, only <strong>37 minutes</strong> longer.
</p>
<p class="irrelevant">
<b class="important">NASA</b>'s Jet <del>Momentum</del> Propulsion Laboratory
is designing mission concepts to survive the <b>Venus</b> extreme temperatures
and atmospheric pressure.
</p>
注意
- 可以利用这个伪类提高规则的优先级。例如，
#foo:not(#bar)和#foo都将匹配相同的元素，但是具有两个id的选择器具有更高的优先级。 :not(.foo)将匹配任何非.foo的元素，包括<html>和<body>。- 可以同时否定多个选择器。例如：
:not(.foo, .bar)等同于:not(.foo):not(.bar)。 - 如果传递给
:not()伪类的选择器无效或者浏览器不支持，则整个规则都将是无效的。克服这种行为的有效方式是使用：:is伪类，它接受一个可容错选择器列表。例如:not(.foo, :invalid-pseudo-class)将使整个规则无效，但是:not(:is(.foo, :invalid-pseudo-class))将匹配任何（包括<html>和<body>）不是.foo的元素。
优先级
:not()伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定；提供与:not(:is(argument))相同的优先级。
参考文档
Views: 57 · Posted: 2025-11-09
———— END ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...