选择属性为非空的元素

Question

假设我有以下内容：

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

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

Answer 1

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

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

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

这将使所有div s非空data-pid为绿色。

在这里小提琴：http://jsfiddle.net/ZuSRM/

Answer 2

看起来很丑，但是这样的事情应该这样做：

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

jsFiddle Demo

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

Answer 3

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

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

jsFiddle

这将有更好的浏览器支持。不是选择你想要的那个，而是设置所有这些，然后将差异放在第二个选择器中。