blob: d8ce75ed51d029c30ee75e0c3f2ff1b763f5a541 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
---
title: ':not()'
slug: 'Web/CSS/:not'
tags:
- CSS
- Web
- 伪类
- 参考
translation_of: 'Web/CSS/:not'
---
<div>{{CSSRef}}</div>
<p><a href="/zh-CN/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">伪类</a> <strong><code>:not()</code></strong> 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为<em>反选伪类</em>（<em>negation pseudo-class</em>）。</p>
<pre class="brush: css no-line-numbers">/* 选择所有不是段落（p）的元素 */
:not(p) {
color: blue;
}</pre>
<div class="note">
<p><strong>注意：</strong></p>
<ul>
<li><code>:not()</code> 伪类不能被嵌套，这意味着 <code>:not(:not(...))</code> 是无效的。</li>
<li>由于伪元素不是简单的选择器，他们不能被当作 <code>:not()</code> 中的参数，形如 <code>:not(p::before)</code> 这样的选择器将不会工作。</li>
<li>可以利用这个伪类写一个完全没有用处的选择器。例如， <code>:not(*)</code> 匹配任何非元素的元素，因此，这个规则将永远不会被应用。</li>
<li>可以利用这个伪类提高规则的<a href="/zh-CN/docs/Web/CSS/Specificity">优先级</a>。例如， <code>#foo:not(#bar)</code> 和 <code>#foo</code> 会匹配相同的元素，但是前者的优先级更高。</li>
<li><code>:not(.foo)</code> 将匹配任何非 <code>.foo</code> 的元素，<em>包括 {{HTMLElement("html")}} 和 {{HTMLElement("body")}}</em>。</li>
<li>这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， <code>body :not(table) a</code> 依旧会应用到表格元素 {{HTMLElement("table")}} 内部的 {{HTMLElement("a")}} 上, 因为 {{HTMLElement("tr")}}将会被 <code>:not(table)</code> 这部分选择器匹配。</li>
</ul>
</div>
<h2 id="语法">语法</h2>
<p><code>:not()</code> 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或 <a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素</a>。</p>
<div class="warning">
<p>以逗号分隔的选择器列表作为参数是实验性的，尚未获得广泛支持。</p>
</div>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>我是一个段落。</p>
<p class="fancy">我好看极了！</p>
<div>我「不是」一个段落。</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('Examples')}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>拓展标准，以允许使用一些复杂的选择器。</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>初始定义。</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">此页面上的兼容性表格是从结构化的数据自动生成的。如果你想贡献数据，请看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们来一发 pull request。</div>
<p>{{Compat("css.selectors.not")}}</p>
|
