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

Question

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

我正在寻找其是否有任何HTML元素不具备display: none的(在其任何有效形式)内嵌style属性.

一些例子:

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

我一直在修补:not() 否定伪类,但下面的选择器显然是无效的:

: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'])...

更新:

comments(:not([style*=display]):not([style*=none]))中建议的选择器实际上对我不起作用

考虑以下:

1. <p></p>
2. <p style=""></p>
3. <p style="border: none;"></p>
4. <p style="border: none;"></p>
5. <p style="display: inline;"></p>
6. <p style="border: none; display: inline"></p>
7. <p style="display: none;"></p>
8. <p style="display : none;"></p>
9. <p style="display :none;"></p>

: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匹配满足选择器aOR选择器的元素b.

同样,正如问题所述,这并不考虑单词的顺序.后者在CSS中是不可能的,因为没有CSS属性选择器考虑单词顺序.

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

这里的例子

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