為什么不css：在某些情況下不起作用？

Question

在這種情況下，為什么:not selector根本不起作用：

a {
  color:red;
}

div a:not(.special a) {
  color: green;
}

在，例如：

<div>
  <span>hello<a href="#">link</a></span>
</div>
<div class="special">
  <span>hello<a href="#">link</a></span>
</div>
<p>
  <a href="#"> something else</a>
</p>

演示： https ： //jsfiddle.net/eguecrvz/

Answer 1

special是div類而不是anchor 。

改變css如：

div:not(.special) a{
  color: green;
}

小提琴

編輯：

如果你想要除.special之外的所有鏈接綠色，請執行以下操作：

a {
  color:green;
}

.special a{
   color: red;
}

更新小提琴

Answer 2

:not()目前不允許組​​合器或任何多個簡單選擇器（例如.special或a ）作為參數。 未來的規范將擴展:not()接受任意數量的復雜選擇器，一旦瀏覽器支持它，你的選擇器div a:not(.special a)將完全按預期工作。

在此期間，它是不可能寫的選擇“的a不具有一個元素.special祖先元素。” 你需要覆蓋有附加.special a在你的規則選擇適用於a一般的元素：

a, .special a {
  color:red;
}

div a {
  color: green;
}

.special a的額外特異性將確保它覆蓋div a ，但如果特異性是一個問題，則需要重新排列規則集。

Answer 3

為什么不css :not在某些情況下不起作用？

 div a:not(.special a) { color: green } 

因為否定偽類（ :not ）只接受一個簡單的選擇器作為參數。

您的參數(.special a)表示不符合條件的后代選擇器 。

6.6.7。 否定偽類

否定偽類， :not(X) ，是一個函數符號，它將一個簡單的選擇器（不包括否定偽類本身）作為參數。 它表示一個未由其參數表示的元素。

什么是簡單的選擇器？

4.選擇器語法

簡單的選擇器是類型選擇器 ， 通用選擇器 ， 屬性選擇器 ， 類選擇器 ， ID選擇器或偽類 。