选择任何字符串时的 CSS 属性答案

【问题标题】：CSS attribute select when any string选择任何字符串时的 CSS 属性
【发布时间】：2021-03-29 04:44:01
【问题描述】：

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

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

即。

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

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

【问题讨论】：

标签： css custom-data-attribute

【解决方案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>

一些有用的链接：

【讨论】：

谢谢，但我认为您误解了。无论属性值如何，我都想选择。在您的示例中，所有 <p /> 都具有 data-modals 属性。有些会有随机值。我想选择那些有价值的人，不管价值如何
谢谢，因为我的所有元素都具有data-modals 属性，所以还没有完全到位。我只想选择那些有价值的人
@Jamie 我已经改变了答案，现在它可以按照你说的那样工作！
（这回答了您之前版本的答案）不幸的是没有。目前，我将得到一个包含“搜索菜单社交登录”之一的字符串。我可以更改底层登录以添加前缀modal-。然后我可以使用[data-modals*="modal-"]
@Jamie 现在它正在工作......它忽略了data-modals="" 并使用data-modals="any text"