jQuery选择器不工作（[attribute~ = value]）

Question

我有很多这样的div

<div class="msg_header msg_header_for-219 media data-message="219">
...
</div>

我用

$(".msg_header_for-<%= msg.id %>").css("background-color", "red");

选择一个特定的ID并将其涂成红色。

我想为其余的白色

着色

所以我有2行

$("[class~='msg_header_for']").css("background-color", "white");
$(".msg_header_for-<%= msg.id %>").css("background-color", "red");

第一个，据我所知，将在类名中选择任何带有msg_header_for的类并使其变为白色。第二个将选择一个特定的颜色并将其涂成红色。

红色部分有效。白色的不是。

我不明白为什么第一个选择器不起作用。 有什么问题？

Answer 1

来自jQuery文档：

  

[attribute~='value']选择具有。的元素   指定属性，其值包含给定单词，   以空格分隔。

因此，您需要[attribute*='value']或look才能适合。

Answer 2

  

第一个，据我所知，将在类名中选择任何带有msg_header_for的类

但您的班级名称是msg_header_for-###，其中###是一个数字，而不是msg_header_for。这不会选择带有数字的类名，因为它不是确切的类名，~=属性选择器只查找由空格分隔的标记，而不是任何其他符号。换句话说，您的属性选择器[class~='msg_header_for']实际上等同于.msg_header_for（至少对于HTML类）。

如果您需要通过带有前缀的类名进行选择，您应该可以使用它：

$("[class*='msg_header_for-']").css("background-color", "white");

对于更复杂的情况，您可以使用this answer中的另一个示例，但如果您的标记是可预测的，那么您可能不会需要这样一个复杂的选择器：

$("[class^='msg_header_for-'], [class*=' msg_header_for-']").css("background-color", "white");

Answer 3

来自：http://www.w3.org/TR/CSS2/selector.html#matching-attrs

[att~=val]

  

表示具有att 属性的元素，其值为以空格分隔的单词的单词，其中一个正好是“val”。如果“val”包含空格，则它将永远不会表示任何内容（因为单词用空格分隔）。如果“val”是空字符串，它将永远不会代表任何东西。

你可以做的是创建一个对所有人都共同的类，然后选择那个类。

<div class="msg_header msg_header_for-100"></div>

然后：

$(".msg_header").css("background-color", "white");
$(".msg_header_for-<%= msg.id %>").css("background-color", "red");