选择属性为非空的元素

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

这将使所有divs非空data-pid绿色.

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

Answer 2

看起来很丑,但是这样的事情应该这样做:

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

jsFiddle演示

如果您需要支持旧浏览器,您还可以使用一些Javascript添加类.

Answer 3

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

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

jsFiddle。

这将具有更好的浏览器支持。无需选择所需的样式，而是为所有样式设置样式，然后将差异放在第二个选择器中。