---
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">&lt;p&gt;我是一个段落。&lt;/p&gt;
&lt;p class="fancy"&gt;我好看极了！&lt;/p&gt;
&lt;div&gt;我「不是」一个段落。&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.fancy {
  text-shadow: 2px 2px 3px gold;
}

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

/* 非 &lt;p&gt; 元素 */
body :not(p) {
  text-decoration: underline;
}

/* 既不是 &lt;div&gt; 也不是 &lt;span&gt; 的元素 */
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>