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

Posted 2023-03-06

【中文标题】使用通配符 CSS 选择器 [重复]

【英文标题】：Using the wildcard CSS selector [duplicate]

【发布时间】：2021-01-21 13:48:08

【问题描述】：

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

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

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

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

I looked at this post for inspiration.

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

【问题讨论】：

我猜你只是忘记了 *

【参考方案1】：

您可以改用这个：

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

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

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

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

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

正如@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;

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