CSS选择器以检查属性是否不包含两个值 [英] CSS selector to check that attribute does not contain both values
问题描述
我有一个非常奇怪的CSS问题要解决。
我正在寻找没有没有显示：无（采用任何有效形式）以样式属性内联。
一些示例：
-
< foo style = display：none /> ; -
< foo style = display：none /> -
< foo style = display：none /> -
< ; foo style = display：none /> -
< foo style = bar：baz; display：none />
我一直在修改 ：not（） negation 伪类，但以下选择器显然无效：
：not（[style * ='display'] [style * =' none']）
您似乎无法组合其他选择器在单个 not（）
我知道即使它起作用，也有可能对于诸如< foo style = border：none; display：inline /> ，但我对此表示满意。
所以...有什么办法吗？除了硬编码一堆变体以外，还可以做我想做的事情？
我真的不想求助于这个： / em>
：not（[style * ='display：none']）：not（[style * ='display ：none']）：not（[style * ='display：none']：not（[style * ='display：none']）：not（[style * ='display：none']）...
更新：
注释（：not（[style * = display]）：not（[style * = none]））实际上对我不起作用
请考虑以下内容：
-
< / p> code> -
< p style =>< / p> -
< p style = border：none;>< / p> -
< p style = border：none;>< / p> -
< p style = display：inline;>< / p> -
< p style = border：none; display：inline>< / p> -
< p style = display：none;>< / p> -
< p style = display：none;>< / p> -
< p style = display：none;>< / p>
：not（[style * = display]）：not（[style * = none]）只会选择前2个 p 。
我希望它选择前6个（或前5个）如果那是我能得到的最好的结果）！ not（[style * ='display'] [style * ='none']），在CSS中无效，因为：not（）
逻辑定律可以帮助我们，请记住！（a AND b）==！a OR！ b ，因此我们可以编写
：not（[style * ='display']）， ：not（[style * ='none']）
因为在CSS中， a，b 匹配满足s的元素选民 a 或选择器 b 。
再次在问题中说，这没有考虑单词的顺序。后者在CSS中是不可能的，因为 CSS属性选择器都没有考虑单词顺序。
I have a pretty odd CSS problem I want to solve.
I'm looking for any html element which does not have display: none (in any of its valid forms) inline in a style attribute.
Some examples:
<foo style="display:none" /><foo style="display: none" /><foo style="display : none" /><foo style="display : none" /><foo style="bar:baz; display:none" />
I've been tinkering with the :not() negation pseudo-class but the following selector is apparently invalid:
:not([style*='display'][style*='none'])
It doesn't look like you can combine other selectors within a single not()
I know that even if it worked, this could potentially create false positives for things like <foo style="border: none; display: inline" />, but I'm somewhat OK with that.
So... is there any way to do what I want aside from hard-coding a bunch of the variations?
I really don't want to resort to this:
:not([style*='display:none']):not([style*='display :none']):not([style*='display: none']:not([style*='display : none']):not([style*='display: none'])...
Update:
The selector suggested in the comments (:not([style*=display]):not([style*=none])) will not actually work for me
Consider the following:
<p></p><p style=""></p><p style="border: none;"></p><p style="border: none;"></p><p style="display: inline;"></p><p style="border: none; display: inline"></p><p style="display: none;"></p><p style="display : none;"></p><p style="display :none;"></p>
:not([style*=display]):not([style*=none]) will only select the first 2 p's.
I want it to select the first 6 (or top 5 if thats the best I can get)!
As you mentioned, you want something equivalent to :not([style*='display'][style*='none']), which is invalid in CSS, since :not() allows no combined selectors.
The laws of logic help us out here. Remember that !(a AND b) == !a OR !b, so we can write
:not([style*='display']), :not([style*='none'])
since in CSS, a, b matches elements that satisfy selector a OR selector b.
Again, as said in the question, this does not take the order of the words into consideration. The latter is impossible in CSS, since none of the CSS attribute selectors consider word order.
这篇关于CSS选择器以检查属性是否不包含两个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
