使用通配符 CSS 选择器 [重复]答案

【问题标题】：Using the wildcard CSS selector [duplicate]使用通配符 CSS 选择器 [重复]
【发布时间】：2021-01-21 13:48:08
【问题描述】：

我有一个带有 CSS 样式的元素，并在类的末尾随机添加了一个数字：

<div class="menu-523673 control-34689"></div>

我想对第二个元素使用通配符 css 选择器，如下所示：

[class^="control-"] {
  color:red;
}

我相信它不起作用，因为元素在中间。有什么办法可以达到这个结果吗？我不能在第一个类名上使用通配符选择器。它必须是第二个。

【问题讨论】：

标签： html css

【解决方案1】：

您可以改用这个：

[class*=" control-"] {
  color: red;
}

开头的空格确保它不匹配 xyzcontrol-34689 之类的东西，只匹配 xyz control-34689 之类的东西。

[class*=" control-"] {
  color: red;
}

&lt;div class="menu-523673 control-34689"&gt;Red text&lt;/div&gt;

*= 搜索整个属性值，而不是像 ^= 那样只搜索开头。

正如@DBS 在 cmets 中指出的那样，如果 control- 是第一件事，一切都会中断，所以这可能会更好：

[class*=" control-"], [class^="control-"] {
  color: red;
}

这匹配属性值中包含 contains-anywhere 的内容，或者仅匹配属性值开头的 contains-。

[class*=" control-"], [class^="control-"] {
  color: red;
}

<div class="control-34689">Red text</div>
<div class="menu-523673 control-34689">Also red text</div>

【讨论】：

【解决方案2】：

您可以使用*= 选择器代替^=。

*=css选择器选择css属性值包含子字符串的元素。

[class*=" control-"] {
  color: red;
}

&lt;div class="menu-523673 control-34689"&gt;Hello&lt;/div&gt;

【讨论】：