CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。
注意:
:not()
伪类不能被嵌套,这意味着:not(:not(...))
是无效的。由于伪元素不是简单的选择器,他们不能被当作
:not()
中的参数,形如:not(p::before)
这样的选择器将不会工作。可以利用这个伪类写一个完全没有用处的选择器。例如,
:not(*)
匹配任何非元素的元素,因此,这个规则将永远不会被应用。可以利用这个伪类提高规则的优先级。例如,
#foo:not(#bar)
和#foo
会匹配相同的元素,但是前者的优先级更高。:not(.foo)
将匹配任何非.foo
的元素,包括<html>
和<body>
。这个选择器只会应用在一个元素上,无法用它来排除所有父元素。比如,
body :not(table) a
依旧会应用到表格元素<table>
内部的<a>
上, 因为<tr>
将会被:not(table)
这部分选择器匹配。
在线示例
为每个非<p>元素的元素设置背景颜色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大卫编程网(div.cn)</title> <style> p { color: #000000; } :not(p) { color: #ff0000; } </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落.</p> <p>这是另一个段落.</p> <div>这是div元素的一些文本。</div> <a href="/" target="_blank">链接到大卫编程网</a> </body> </html>测试看看 ‹/›
定义和用法
:not() 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或 伪元素。
浏览器兼容性
表格中的数字表示支持该选择器的第一个浏览器的版本号。
选择器 | |||||
---|---|---|---|---|---|
:not() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |