在css中嵌套：not（）選擇器

Question

是否可以在：not選擇器中嵌套值？例如：

:not(div > div) 

每當我嘗試它，它似乎並沒有工作。 也許你需要以另一種方式使用它，我還沒有想出來？ 到目前爲止，在我看到的所有示例中，只能在此選擇器內使用一個值。

Answer 1

:not()一次只接受一個簡單的選擇器;這是在Selectors 3 spec提到：

的否定僞類，:not(X)，是一種功能性表示法服用simple selector（不包括否定僞類本身）作爲參數。它代表了一個沒有被其參數表示的元素。

您示例中的簡單選擇器將是您擁有的兩個div令牌。其他簡單的選擇器包括類選擇器，ID選擇器，屬性選擇器和僞類。它不接受多個簡單的選擇器，也不接受像>這樣的組合器或空間。

取決於你想精確地選擇哪些元素，有可能無法排除的方式div > div：

• 如果你只是想選擇是div的子元素，本身是不div，用這個來代替：

  div > :not(div) 
  

• 如果你只需要選擇div元素的父元素不是div，用這個來代替：

  :not(div) > div 
  

如果你想自己使用這個否定，選擇所有其他元素，那麼就沒有使用只是選擇的方式。

CSS中我唯一可以想到的另一個可行的解決方法是將樣式應用到不需要:not()表達式的元素，然後撤消div > div。這適用於你試圖定位的任何一組元素;缺點是不是所有的屬性都可以輕鬆重置。或者，如果您使用的是支持:not(div > div)unlike the CSS version的jQuery，則可以將選擇器放在腳本中，例如，讓jQuery將類名稱應用於這些元素，然後將該類別定位到您的CSS中。