Question

可以使用CSS属性选择器和/或选择器组合来确定某个属性是否缺席吗？

属性选择器可用于测试属性是否为空：

[aria-label='']

...但该属性仍然必须存在才能通过。如果HTML标记根本没有该属性，则上述选择器不会通过。

如果属性不存在，选择器是否可以以通过的方式编写？

Answer 1

是的，使用:not()伪类：

非常简单

span:not([wrong]) {
  color: blue
}

<span>I have no attribute</span><br/>
<span wrong>I have the wrong attribute :-(</span>

Answer 2

您可以应用属性选择器和:not()否定伪类的组合：

div[orange] { background-color: orange; }                       /* 1 */

div:not([orange]) { background-color: lightgreen; }             /* 2 */

div { height: 50px; }

<div>Does not have the orange attribute</div>
<div orange>Has the orange attribute</div>
<div green>Does not have the orange attribute</div>
<div orange="orange">Has the orange attribute</div>

注意：

使用orange属性定位div。
目标不具有orange属性的div。

参考文献：

Answer 3

这样的东西？

＆＃13;

div:not([aria-label]) {
  color: red;  
}

＆＃13;

<div aria-label="test">
  test
</div>

<div>
  test2
</div>

＆＃13;

通过CSS属性选择器确定属性是否不存在？

3 个答案: