选择具有非空属性的元素

使用CSS选择器选择具有非空属性的元素

简短答案：

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

详细解释： (结论相同，只是解释了为什么我们需要这样做)

假设您有一个使用特殊data-属性进行样式设置的元素：

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

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

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

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

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

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

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

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

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

在理想情况下，当没有值时，我们只需从HTML模板中删除data-属性。但是许多模板语言故意不允许使用可以帮助我们完全添加或不添加该属性的逻辑。

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

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

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

以上是选择具有非空属性的元素的详细内容。更多信息请关注PHP中文网其他相关文章！