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

Question

CSS＆＃34;包含＆＃34;选择器是

td[class*="foo"]

我可以用

选择多个班级

td[class*="foo bar"]

然而<td class="foo baz bar" />

会失败

我如何做CSS＆＃34;包含＆＃34;通配符选择？

BTW：我无法使用td.foo.bar

Answer 1

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

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

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

<强> WORKING DEMO

来自MDN：

  

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

Answer 2

您正在寻找的选择器如下：

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

但是，如果你需要使用那样的选择器，那么它通常表明你的类名逻辑是坏的。

Answer 3

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

从上面找到一个给定字符串与根据你的问题指定的类中的字符串的匹配，我觉得唯一可行的选项是*和~。

  

1。 Demo for *

     

     

2。 Demo for ~

     

---

多个属性匹配