选择具有非空属性的元素

最新推荐文章于 2021-06-04 06:27:49 发布

cunqu9743

最新推荐文章于 2021-06-04 06:27:49 发布

阅读量652

点赞数 1

文章标签：定位 css python java html

简短答案：

[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属性buttttt定位所有元素，实际上我们只想在有值的情况下这样做。如果该值为空白，我们只想完全跳过任何特殊样式。

在理想情况下，如果没有价值，我们将仅从HTML模板中删除数据属性。但是，很多模板语言是故意不允许使用逻辑来帮助我们完全放入或不放入该属性的。

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

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

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

翻译自: https://css-tricks.com/select-an-element-with-a-non-empty-attribute/

关注