CSS 子串匹配属性选择器：包含多个类名答案

【问题标题】：CSS substring matching attribute selectors: Contains multiple class namesCSS 子串匹配属性选择器：包含多个类名
【发布时间】：2022-01-02 20:16:54
【问题描述】：

CSS“包含”选择器是

td[class*="foo"]

我可以选择多个类

td[class*="foo bar"]

但是，<td class="foo baz bar" /> 会失败

如何进行 CSS“包含”通配符选择？

顺便说一句：我不能使用td.foo.bar

【问题讨论】：

“失败”是什么意思？ jsbin.com/wufot/1/edit 似乎对我有用，尽管这不是选择课程的正确方法。
@HashemQolami 是对的。你能举一个失败的例子吗？
td[class~="foo"][class~="bar"] 将完全匹配 <td class="foo bar"> 而不会匹配 <td class="foobar bar">
我的错 - 我的意思是 <td class="foo baz bar" /> 会失败 - 我更新了问题
是否有特定原因不能使用类选择器而不是属性选择器？您使用的标记语言没有class 属性形式的类语义？

【解决方案1】：

您要查找的选择器如下，详情请参阅this question。

td[class*="foo"][class*="bar"]

但是，如果您需要使用这样的选择器，则通常表明您的类名逻辑不好。

【讨论】：

【解决方案2】：

老实说，我不知道您所说的“失败”td[class*="foo bar"] 选择器是什么意思，因为在您的特定情况下，seems working 对我来说。

但是，由于类名由空格分隔，您可以使用多个[attr~=value] attribute selectors 来选择具有如下类的元素：

td[class~="foo"][class~="baz"] {
  background-color: gold;
}

来自MDN：

[attr~=value] 表示属性名为attr的元素其值是以空格分隔的单词列表，其中一个是正是“价值”。

【讨论】：

我的错 - 我的意思是 <td class="foo baz bar" /> 会失败 - 我更新了问题
是的，td[class~="foo"][class~="baz"] 完美运行。与td[class*="foo"][class*="bar"] 有什么区别？
@Horen 欢迎您。使用[class*="foo"] 会导致意外问题，因为它也选择了<td class="foobar"> 元素。正如 andyb 在他的 comment 中提到的那样。
@Horen 看看this example。切换选择器以查看差异。
@Horen：~= 属性选择器在您的情况下无法使用类选择器的唯一方法是，如果您实际上并未使用 HTML...

【解决方案3】：

访问：CSS-Tricks（CSS 属性选择器）

从上面查找给定字符串与根据您的问题指定的类中的字符串的匹配项，我发现唯一有效且正确的选项是* 和~。

1。 Demo for *

2。 Demo for ~

【讨论】：