:not()

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

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

注意:

  • :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) 这部分选择器匹配。

语法

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

以逗号分隔的选择器列表作为参数是实验性的,尚未获得广泛支持。

:not( <complex-selector-list> )

where
<complex-selector-list> = <complex-selector>#

where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

示例

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;
}

结果

规范

规范 状态 备注
Selectors Level 4
:not()
Working Draft 拓展标准,以允许使用一些复杂的选择器。
Selectors Level 3
:not()
Recommendation 初始定义。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Negation pseudo-class selector (:not())Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 3.2WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
Selector list argumentChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 9WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 9Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support