选择属性为非空的元素

【问题标题】：Select elements where attribute is non-empty选择属性为非空的元素
【发布时间】：2013-05-14 07:45:52
【问题描述】：

假设我有以下：

<div data-pid="">Unknown</div>
<div data-pid="123">Known 123</div>

有没有办法在 CSS 中只选择 data-pid 属性为非空的元素？

【问题讨论】：

【解决方案1】：

如果你不介意稍微向后做一些事情并且你需要它在不支持:not的浏览器中工作，这很有效：

div[data-pid] {
    color: green;
}

div[data-pid=""] {
    color: inherit;
}

这将使所有divs 和非空data-pids 变为绿色。

【讨论】：

【解决方案2】：

看起来很难看，但应该这样做：

[data-pid]:not([data-pid=""])

如果您需要支持旧版浏览器，您还可以使用一点 Javascript 添加类。

【讨论】：

【解决方案3】：

/* Normal styles */
[data-pid] {}

/* Differences */
[data-pid=""] {}

这将有更好的浏览器支持。不要选择您想要的，而是将它们全部设置样式，然后将差异放在第二个选择器中。

【讨论】：