Skip to main content

否定伪类 not

Docs

CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

/* 选择所有不是段落（p）的元素 */
:not(p) {
  color: blue;
}

这里有几个在你使用 :not() 伪类时你应该注意到的不寻常的影响和结果：

  • 可以使用这个伪类写完全无用的选择器。例如，:not(*) 匹配任何不是元素的元素，这显然是荒谬的，所以这个附加的规则将永远不被应用。
  • 可以利用这个伪类提高规则的优先级。例如，#foo:not(#bar) 和 #foo 都将匹配相同的元素，但是具有两个 id 的选择器具有更高的优先级。
  • :not() 伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定；提供与 :not(:is(argument)) 相同的优先级。
  • :not(.foo) 将匹配任何非 .foo 的元素，包括 <html> 和 <body>。
  • 这个选择器将匹配任意"不是一个 X"的元素。当与后代选择器一起使用，这可能令人惊讶，因为有多种路径可以选择一个目标元素。例如，body :not(table) a 仍将应用 <table> 中的链接，因为 <tr>、<tbody>、<th>、<td>、<caption> 等都可以匹配选择器 :not(table) 部分。
  • 你可以同时否定多个选择器。例如：:not(.foo, .bar) 等同于 :not(.foo):not(.bar)。
  • 如果传递给 :not() 伪类的选择器无效或者浏览器不支持，则整个规则都将是无效的。克服这种行为的有效方式是使用：:is 伪类，它接受一个可容错选择器列表。例如 :not(.foo, :invalid-pseudo-class) 将使整个规则无效，但是 :is(:not(.foo), :not(:invalid-pseudo-class)) 将匹配任何不是 .foo 的元素。
Loading Github Gist ...
Details