CSS 选择器检查属性不包含两个值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25676053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS selector to check that attribute does not contain both values
提问by Zach Lysobey
I have a pretty odd CSS problem I want to solve.
我有一个很奇怪的 CSS 问题要解决。
I'm looking for any html element which does nothave display: none(in any of its valid forms) inline in a styleattribute.
我正在寻找其是否有任何HTML元素不具有display: none内嵌的（在其任何有效形式）style属性。
Some examples:
一些例子：
<foo style="display:none" /><foo style="display: none" /><foo style="display : none" /><foo style="display : none" /><foo style="bar:baz; display:none" />
<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()negationpseudo-classbut the following selector is apparently invalid:
我一直在修改:not()否定伪类，但以下选择器显然无效：
:not([style*='display'][style*='none'])
It doesn't look like you can combine other selectors within a single not()
看起来你不能在一个单一的选择器中组合其他选择器 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.
我知道即使它有效，这也可能会导致诸如 之类的误报<foo style="border: none; display: inline" />，但我对此感到有些接受。
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
评论中建议的选择器 ( :not([style*=display]):not([style*=none])) 实际上对我不起作用
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>
<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.
:not([style*=display]):not([style*=none])只会选择前 2p的。
I want it to select the first 6 (or top 5 if thats the best I can get)!
我希望它选择前 6 个（或前 5 个，如果这是我能得到的最好的）！
回答by user123444555621
As you mentioned, you want something equivalent to :not([style*='display'][style*='none']), which is invalid in CSS, since :not()allows no combined selectors.
正如您所提到的，您需要等效于 的东西:not([style*='display'][style*='none'])，这在 CSS 中是无效的，因为:not()不允许组合选择器。
The laws of logic help us out here. Remember that !(a AND b) == !a OR !b, so we can write
逻辑法则在这里帮助我们。记住这一点!(a AND b) == !a OR !b，所以我们可以写
:not([style*='display']), :not([style*='none'])
since in CSS, a, bmatches elements that satisfy selector aOR selector b.
因为在 CSS 中，a, b匹配满足 selector aOR 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 selectorsconsider word order.
同样，正如问题中所说，这没有考虑单词的顺序。后者在 CSS 中是不可能的，因为没有一个CSS 属性选择器考虑词序。
回答by Josh Crozier
It would clearly be better to do this with JavaScript... but here is one possible CSS solution:
使用 JavaScript 显然会更好……但这是一种可能的 CSS 解决方案：
p:not([style*=display]):not([style*=none]),
p[style*=display]:not([style*=none]),
p[style*=none]:not([style*=display]),
p[style*=border][style*=none] {
color: red;
}
As you can see, it is a little tedious. It covers a majority of cases, including the ones you listed. The more cases you want to cover, the more selectors you would need.
如您所见，这有点乏味。它涵盖了大多数情况，包括您列出的情况。您想要涵盖的案例越多，您需要的选择器就越多。
