CSS 属性 select 当任何字符串

Question

我有一个数据属性data-modals。当属性有值时，我想用 CSS 作为目标。我不介意值是多少。

我可以找到有关选择属性何时存在或特定值的指南，但无法找到 'any' 值 - 相当于“*”。

即

<element data-modals="" /> 不应成为目标

<element data-modals="any text" /> 应该是目标

Answer 1

您可以这样 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>

一些有用的链接：

CSS 属性 select 当任何字符串

CSS attribute select when any string

css

custom-data-attribute