Css 选择属性为非空的元素

假设我有以下几点：

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

未知
已知123

---

CSS中是否有方法仅选择

数据pid

属性为非空的元素？

看起来很难看，但类似这样的方法应该可以做到：

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

---

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

如果您不介意稍微向后操作，并且需要它在不支持

：not

的浏览器中工作，则此操作有效：

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

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

这将使所有具有非空数据pid的

div

s变为绿色

在这里拉小提琴：

---

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

。所以没有单一的属性选择器？@Kolink我不认为接受这个答案有什么好处，因为我比alex快6秒。虽然我不知道

inherit

是否是浏览器支持的最佳选择：p

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

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