问题 嵌套在css:not()选择器中


是否可以在:not selector中包含嵌套值?例如:

:not(div > div)

每当我尝试它,它似乎不起作用。 也许你需要以另一种方式使用它我还没弄明白? 到目前为止,在我看到的所有示例中,您只能在此选择器中使用一个值。


4835
2018-02-14 04:38


起源

div > div div 应该是你正在寻找的情况..对吗? - Mr_Green


答案:


:not() 一次只接受一个简单的选择器;这是在提到的 选择器3规格

否定伪类, :not(X),是一个功能符号 简单选择器 (不包括否定伪类本身)作为参数。它表示不由其参数表示的元素。

您的示例中的简单选择器将是两个 div 你拥有的代币。其他简单的选择器包括类选择器,ID选择器,属性选择器和伪类。它不接受多个简单的选择器,也不接受像这样的组合器 > 或空间。

根据您尝试精确选择的元素,可能无法排除 div > div

  • 如果您只想选择a的子元素 div,这本身不是 div,改为使用它:

    div > :not(div)
    
  • 如果你只想选择 div 父元素不是的元素 div,改为使用它:

    :not(div) > div
    

如果您想单独使用此否定,请选择 所有 其他元素,那么就没有办法只使用选择器。

我能想到的CSS中唯一可行的解​​决方法是将样式应用于您想要的元素而不需要 :not() 表达式,然后撤消它们 div > div。这适用于您尝试定位的任何元素集;缺点是并非所有属性都可以轻松重置。

或者,如果您使用的是jQuery,它确实支持 :not(div > div)  不像CSS版本,您可以将选择器放在脚本中,例如,让jQuery将类名应用于这些元素,然后在CSS中定位该类。


15
2018-02-14 04:43



如果一个人可以在他们的选择器中使用逗号, :not(div), :not(div) > div 可能会选择一些不匹配的东西 div > div。 - cHao
@cHao:我现在看起来很明显,我真的不知道我是怎么错过它的。谢谢! - BoltClock♦