选择具有非空属性的元素 | CSS-Tricks

简短回答

[data-foo]:not([data-foo=""]) { }

较长回答（相同结论，只是对我们可能需要它的解释）

假设您有一个元素，您使用特殊的 data-attribute 对其进行样式设置

<div data-highlight="product">
</div>

您想定位该元素，并在突出显示时执行特殊操作。

[data-highlight] {
  font-size: 125%; 
}

[data-highlight="product"] img {
  order: 1;
}

该 data-type 属性是模板的一部分，因此它可以具有您设置的任何值。

<div data-highlight="{{ value }}">
</div>

有时没有值！因此输出的 HTML 是

<div data-highlight="">
</div>

但这可能很棘手。请查看上面第一个 CSS 块，我们想要定位所有具有 data-highlight 属性的元素，但实际上，只有当它具有值时我们才想要这样做。如果该值为空，我们希望完全跳过任何特殊样式。

在理想情况下，如果模板中没有值，我们只需要删除该 data-attribute。但是许多模板语言有意地不允许在其中使用帮助我们添加或不添加该属性的逻辑。

相反，我们可以使用 CSS 来解决它

[data-highlight]:not([data-highlight=""]) {
  font-size: 125%; 
}

[data-highlight="product"] img {
  order: 1;
}