嵌套在css:not()选择器内 [英] nesting inside css :not() selectors
问题描述
是否可以在:not selector中包含嵌套值?例如:
Is it possible to have nested values inside the :not selector? For eg:
:not(div > div)
每当我尝试它,它似乎不工作。
也许你需要使用它另一种方式,我没有想出来?
到目前为止,在我看到的所有示例中,只能在此选择器中使用一个值。
Whenever I tried it, it does not seem to work. Perhaps you need to use it another way which I have not figured out? So far, in all the examples I see, you can only use one value inside this selector.
推荐答案
code>:not()一次只接受一个简单的选择器;这在选择器3规范中提及:
:not()
only accepts one simple selector at a time; this is mentioned in the Selectors 3 spec:
否定伪类
:not(X)
是一个函数记法,取简单选择器(不包括否定伪类本身)作为参数。它表示一个不是由其参数表示的元素。
The negation pseudo-class,
:not(X)
, is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
您的示例中的简单选择器将是两个 div
令牌有。其他简单选择器包括类选择器,ID选择器,属性选择器和伪类。它不接受多个简单选择器,也不接受>
或空格的组合器。
The simple selectors in your example would be the two div
tokens that you have. Other simple selectors include class selectors, ID selectors, attribute selectors and pseudo-classes. It does not accept more than one simple selector, nor does it accept combinators like >
or space.
你试图选择的元素,可能没有办法排除 div> div
:
Depending on which elements you're trying to select exactly, there may not be a way to exclude div > div
:
-
如果您只想选择
div
,它们本身不是div
,请改用:
If you only want to select elements that are children of a
div
, that are themselves notdiv
, use this instead:
div > :not(div)
如果只想选择 div
的父元素不是 div
的元素,请改用:
If you only want to select div
elements whose parent element is not a div
, use this instead:
:not(div) > div
如果要使用此否定
在CSS中唯一的其他可行的解决方法,我可以想到的是在没有:not()
表达式的情况下将样式应用到所需的元素,然后为 div> div
。这适用于您尝试定位的任何元素集合;
The only other viable workaround in CSS that I can think of is to apply styles to the elements you want without the :not()
expression, then undo them for div > div
. This works for any set of elements you're trying to target; the disadvantage is that not all properties can be easily reset.
或者,如果你使用jQuery,它支持:not(div> ; div)
不像CSS版本,你可以将选择器放在一个脚本中,例如,jQuery应用一个类名称到这些元素,然后在CSS中定位该类。
Alternatively, if you're using jQuery, which does support :not(div > div)
unlike the CSS version, you can place the selector in a script and, for instance, have jQuery apply a class name to those elements then target that class in your CSS.
这篇关于嵌套在css:not()选择器内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!