CSS 属性选择任何字符串时

编程问答 2022-05-16

问题描述

我有一个数据属性 data-modals。当属性有值时，我想用 CSS 来定位它。我不介意值是多少。

我可以找到用于选择属性何时存在或特定值的指南，但不能用于“任何”值 - 相当于“*”。

即。

<element data-modals="" /> 不应被定位

<element data-modals="any text" /> 应该有针对性

解决方法

您可以像这样使用 CSS 属性选择器：

element[data-modals]:not([data-modals=""]) {
  color: red;
}

示例：

p[data-modals]:not([data-modals=""]) {
  color: red;
}
<p data-modals="">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti,fugit.
</p>

<p data-modals="any text">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti,fugit.
</p>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti,fugit.
</p>



一些有用的链接：

custom-data-attribute