:not()

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

:not() CSS 偽類表示不匹配選擇器列表的元素。因為它阻止選擇特定項,所以被稱為否定偽類

試一試

p:not(.irrelevant) {
  font-weight: bold;
}

p > strong,
p > b.important {
  color: crimson;
}

p > :not(strong, b.important) {
  color: darkmagenta;
}
<p>
  <b>Mars</b> is one of the most Earth-like planets. <b>Mars</b> day is almost
  the same as an Earth day, only <strong>37 minutes</strong> longer.
</p>

<p class="irrelevant">
  <b class="important">NASA</b>'s Jet <del>Momentum</del> Propulsion Laboratory
  is designing mission concepts to survive the <b>Venus</b> extreme temperatures
  and atmospheric pressure.
</p>

:not() 偽類有許多怪癖、技巧和意想不到的結果,在使用它之前應該注意。

語法

css
:not(<complex-selector-list>) {
  /* ... */
}

引數

:not() 偽類需要一個選擇器列表作為其引數,它是一個由一個或多個選擇器組成的逗號分隔列表。該列表不能包含偽元素,但允許使用任何其他簡單、複合和複雜選擇器。

描述

在使用 :not() 時,有幾個不尋常的效果和結果需要牢記

  • 可以使用此偽類編寫無用的選擇器。例如,:not(*) 匹配任何不是元素的元素,這顯然是無稽之談,因此附帶的規則永遠不會應用。
  • 這個偽類可以增加規則的特異性。例如,#foo:not(#bar) 將匹配與更簡單的 #foo 相同的元素,但具有兩個 id 選擇器更高的特異性。
  • :not() 偽類的特異性被其逗號分隔的選擇器引數中最具體的選擇器的特異性所取代;提供與寫成 :not(:is(argument)) 相同的特異性。
  • :not(.foo) 將匹配任何不是 .foo 的內容,包括 <html><body>
  • 此選擇器將匹配所有“不是 X”的內容。當與後代組合器一起使用時,這可能會令人驚訝,因為有多種路徑可以選擇目標元素。例如,body :not(table) a 仍然會應用於 <table> 中的連結,因為 <tr><tbody><th><td><caption> 等都可以匹配選擇器的 :not(table) 部分。為避免這種情況,你可以改用 body a:not(table a),它只會應用於不是表格後代的連結。
  • 你可以同時否定多個選擇器。例如::not(.foo, .bar) 等同於 :not(.foo):not(.bar)
  • 如果傳遞給 :not() 偽類的任何選擇器無效或瀏覽器不支援,則整個規則將失效。克服此行為的有效方法是使用 :is() 偽類,它接受一個容錯選擇器列表。例如,:not(.foo, :invalid-pseudo-class) 會使整個規則失效,但 :not(:is(.foo, :invalid-pseudo-class)) 將匹配任何(包括 <html><body>)不是 .foo 的元素。

示例

將 :not() 與有效選擇器一起使用

此示例顯示了使用 :not() 的幾種方法。

HTML

html
<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
<h2>
  <span class="foo">foo inside h2</span>
  <span class="bar">bar inside h2</span>
</h2>

CSS

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

/* <p> elements that don't have a class `.fancy` */
p:not(.fancy) {
  color: green;
}

/* Elements that are not <p> elements */
body :not(p) {
  text-decoration: underline;
}

/* Elements that are not <div>s or `.fancy` */
body :not(div):not(.fancy) {
  font-weight: bold;
}

/* Elements that are not <div>s or `.fancy` */
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* Elements inside an <h2> that aren't a <span> with a class of `.foo` */
h2 :not(span.foo) {
  color: red;
}

結果

將 :not() 與無效選擇器一起使用

此示例顯示了 :not() 與無效選擇器的使用以及如何防止失效。

HTML

html
<p class="foo">I am a paragraph with .foo</p>
<p class="bar">I am a paragraph with .bar</p>
<div>I am a div without a class</div>
<div class="foo">I am a div with .foo</div>
<div class="bar">I am a div with .bar</div>
<div class="foo bar">I am a div with .foo and .bar</div>

CSS

css
/* Invalid rule, does nothing */
p:not(.foo, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

/* Select all <p> elements without the `foo` class */
p:not(:is(.foo, :invalid-pseudo-class)) {
  color: green;
  border-top: dotted thin currentColor;
}

/* Select all <div> elements without the `foo` or the `bar` class */
div:not(.foo, .bar) {
  color: red;
  font-style: italic;
}

/* Select all <div> elements without the `foo` or the `bar` class */
div:not(:is(.foo, .bar)) {
  border-bottom: dotted thin currentColor;
}

結果

p:not(.foo, :invalid-pseudo-class) 規則無效,因為它包含一個無效選擇器。:is() 偽類接受一個容錯選擇器列表,因此 :is(.foo, :invalid-pseudo-class) 規則有效且等同於 :is(.foo)。因此,p:not(:is(.foo, :invalid-pseudo-class)) 規則有效且等同於 p:not(.foo)

如果 :invalid-pseudo-class 是一個有效的選擇器,那麼上面的前兩條規則仍然是等效的(最後兩條規則展示了這一點)。使用 :is() 使規則更健壯。

規範

規範
選擇器 Level 4
# 否定

瀏覽器相容性

另見