编辑这个页面须要登录或更高权限！

CSS3 :not 选择器

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

完整CSS选择器参考手册

注意：

  • :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>菜鸟教程(cainiaojc.com)</title>
<style>
p {
    color: #000000;
}
:not(p) {
    color: #ff0000;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落.</p>
<p>这是另一个段落.</p>
<div>这是div元素的一些文本。</div>
<a href="//www.cainiaojc.com/" target="_blank">链接到菜鸟教程</a>
</body>
</html>
测试看看 ‹/›

定义和用法

:not() 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或 伪元素。

浏览器兼容性

表格中的数字表示支持该选择器的第一个浏览器的版本号。

选择器




:not()4.09.03.53.29.6

完整CSS选择器参考手册

CSS 函数(Functions)CSS 选择器大全

CSS 参考手册
CSS @规则(RULES)
CSS 属性大全