Question

我想解决一个非常奇怪的CSS问题。

我正在寻找任何不 display: none（在其任何有效格式中）内嵌style属性的html元素。

一些例子：

<foo style="display:none" />
<foo style="display: none" />
<foo style="display : none" />
<foo style="display : none" />
<foo style="bar:baz; display:none" />

我一直在修补:not() negation pseudo-class，但以下选择器显然无效：

:not([style*='display'][style*='none'])

看起来你不能在一个not()

中组合其他选择器

我知道即使它有效，这可能会对<foo style="border: none; display: inline" />之类的东西造成误报，但我对此有点不错。

所以...除了硬编码一堆变化之外，还有什么办法可以做我想要的吗？

我真的不想诉诸于此：

: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])）实际上对我不起作用

请考虑以下事项：

:not([style*=display]):not([style*=none])只会选择前2个p。

我希望它选择前6个（或者前5个，如果这是我能得到的最好的那个）！

Answer 1

正如您所提到的，您需要等同于:not([style*='display'][style*='none'])的内容，这在CSS中无效，因为:not()不允许组合选择器。

逻辑定律帮助我们在这里。请记住!(a AND b) == !a OR !b，我们可以写

:not([style*='display']), :not([style*='none'])

因为在CSS中，a, b匹配满足选择器a或选择器b的元素。

同样，正如问题所述，这并不考虑单词的顺序。后者在CSS中是不可能的，因为CSS attribute selectors都没有考虑单词顺序。

Answer 2

使用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;
}

Example Here

正如你所看到的，这有点乏味。它涵盖了大多数情况，包括您列出的情况。您想要覆盖的案例越多，您需要的选择器就越多。

用于检查该属性不包含这两个值的CSS选择器

更新

2 个答案: