:not()

版本： CSS3

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

示例

/* 选择所有不是段落（p）的元素 */

:not(p) {
  color: blue;
}

语法:

E :not( s ){ sRules }

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

注意：

:not() 不支持在其参数中使用其他伪类。例如， h1:not(p:first-of-type) 不能匹配任何元素，包括 <h1> 。

可以利用这个伪类写一个完全没有用处的选择器。例如， :not(*) 匹配任何非元素的元素，因此，这个规则将永远不会被应用。

可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素，但是前者的优先级更高。

:not(.foo) 将匹配任何非 .foo 的元素， 包括 <html> 和 <body> 。

这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table)a 依旧会应用到表格元素 <table> 内部的 <a> 上，因为 <tr> 将会被 :not(table) 这部分选择器匹配。

浏览器支持


IE9以及新版本浏览器均支持 `:not()` 选择器。

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color:pink;
}

:not(p){
color:skyblue;
}
</style>
</head>
<body>

<h1>这是一个标题</h1>

<p>这是一个段落.</p>
<p>这是另一个段落.</p>

</body>
</html>

效果图：

CSS 否定CSS伪类 :not() 匹配不符合一组选择器的元素，它有时也被称为 反选伪类 （ negation pseudo-class ）。不能包含另外一个否定选择器。

/* selects any element that is not a paragraph */
:not(p) {
  color: blue;
}

//HTML

<p>我是一个段落。</p>
<p class="fancy">我好看极了！</p>
<div>我不是一个段落。</div>

//CSS

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* 类名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
  color: green;
}

/* 非 <p> 元素 */ 
body :not(p) {
  text-decoration: underline;
}

/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
  font-weight: bold;
}

/* 类名不是 `.crazy` 或 `.fancy` 的元素 */
/* 注意，此语法尚未获广泛支持。 */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

返回CSS导航

:not()

语法:

浏览器支持

示例