检查当前元素是否具有指定属性的通用 CSS 选择器答案

【问题标题】：Generic CSS Selector that checks whether the current element has specified attributes检查当前元素是否具有指定属性的通用 CSS 选择器
【发布时间】：2023-02-23 02:42:15
【问题描述】：

不知道这是否重复，但很难找到答案。我正在寻找一个通用的 CSS 选择器个别地针对当前的元素/标签（这是任意的）以查看它是否包含一组指定的属性。有人知道如何表达这样的选择器吗？

我正在谈论的一个例子是，给定两个包含相同属性的不同标签（代表组件）：

<div data-colorMode="light">...</div>
<nav data-colorMode="dark">...</nav>

如果有任何意义，我只希望通用选择器在本地组件级别运行 CSS 相关内容时获取单个组件。希望我不是在胡说八道，因为我只是 CSS 的高级初学者。

【问题讨论】：

标签： css css-selectors

【解决方案1】：

CSS：

.myclass[data-colorMode=light] { background-color: lightblue; }
.myclass[data-colorMode=dark] { background-color: darkblue; }

用法：

<div class="myclass" data-colorMode="light">Hello</div>
<nav class="myclass" data-colorMode="dark">World</nav>

只有类为“myclass”的元素才会受规则影响。我想这就是你所描述的。

【讨论】：