我有很多这样的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的类并使其变为白色。第二个将选择一个特定的颜色并将其涂成红色。
红色部分有效。白色的不是。
我不明白为什么第一个选择器不起作用。 有什么问题?
答案 0 :(得分:4)
答案 1 :(得分: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");
答案 2 :(得分:1)
来自: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");