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

Question

CSS "contains" 选择器是指：

td[class*="foo"]

我可以使用以下方法选择多个类：

td[class*="foo bar"]

但是对于<td class="foo baz bar" />这种情况将无法成功。

我如何使用CSS "contains"通配符选择？

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

- Horen

---

“失败”是什么意思？在我看来，它似乎是有效的http://jsbin.com/wufot/1/edit。虽然这不是选择类的正确方式。 - Hashem Qolami

@HashemQolami是正确的。你能给一个它失败的例子吗？ - Zword

td[class~="foo"][class~="bar"] 将完全匹配 <td class="foo bar">，但不会匹配 <td class="foobar bar">。 - andyb

我的错 - 我的意思是 <td class="foo baz bar" /> 会失败 - 我更新了问题。 - Horen

你不能使用类选择器来代替属性选择器吗？这是有特定原因的吗？你是在处理一种没有 class 属性语义的标记语言吗？ - BoltClock

Answer 1

您要查找的选择器如下所示，请参见此问题以获取更多详细信息。

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

然而，如果您需要使用这样的选择器，那通常意味着您的类名逻辑存在问题。

- Etheryte

---

我正在电子邮件CSS中使用它来进行媒体查询。我更喜欢使用不同的选择器，但据我所知，这是唯一使其正常工作的方法。 - Horen

我建议不要在类名和其他分隔值中使用 *=，原因如 Hashem Qolami 的回答所述。 - BoltClock

Answer 2

老实说，我不知道您所说的“失败”的含义是什么，因为在您特定的情况下，td[class*="foo bar"]选择器似乎可以工作。

然而，由于类名之间用空格分隔，您可以使用多个[attr~=value]属性选择器来选择具有以下类的元素：

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

工作演示。

来自MDN的介绍：

[attr~=value] 表示具有属性名称为 attr 的元素，其值是一个由空格分隔的单词列表，其中之一正好是 "value"。

- Hashem Qolami

---

我的错 - 我的意思是对于<td class="foo baz bar" />将会失败 - 我更新了问题。 - Horen

是的，td[class~="foo"][class~="baz"] 完美地工作。与 td[class*="foo"][class*="bar"] 有什么区别？ - Horen

@Horen 不用谢。使用 [class*="foo"] 可能会导致意外问题，因为它也会选择 <td class="foobar"> 元素。正如 andyb 在他的评论中提到的那样。 - Hashem Qolami

@Horen 请查看这个例子。切换选择器以查看差异。 - Hashem Qolami

@Horen：在你的情况下，~=属性选择器能够起作用而类选择器不能起作用的唯一方式是如果你实际上并没有使用HTML…… - BoltClock

Answer 3

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

从上面的内容中，为了找到给定字符串与类别字符串匹配的选项，我发现唯一有效和正确的选项是 * 和 ~。

1. * 的演示

2. ~ 的演示

---

多个属性匹配

- Zword

---

你最好在评论中发布这个。 - BoltClock