在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中。