CSS属性选择器未选择

Question

我有一个问题，但不知道是否有答案，因为似乎没有人知道。

我正在尝试使用CSS选择器......

我在网页上有几个div，他们的类名以-modal结尾，我使用CSS选择器选择它们

div[class$="-modal"] { CSS Properties ... }

这是一种享受。我还有三个以-window结尾的div（.one-window，.two-window等），我尝试用

选择它们

div[class$="-window"] { CSS Properties ... }

我一无所获。如果我使用传统的

来设计它们

.one-window, .two-window { CSS Properties ... }

这很好。

任何想法？

Answer 1

  

CSS3 Selectors - 6.3.2. Substring matching attribute selectors

     

[ATT $ = VAL]

     

表示具有att属性的元素，其值以后缀“val”结尾。如果“val”是空字符串，则选择器不代表任何内容。

因此，*-window必须是属性中出现的最后一个类才能被选中。

<div class="foo bar one-window">...</div>

将选择上述HTML，因为该属性以*-window - (example)结尾。

div[class$="-window"] {
    /* .. */
}

---

<div class="one-window foo bar">text..</div>

而上述不会被选中 - (example)

div[class$="-window"] {
    /* .. */
}

---

可能的解决方案是重新排序类属性值，以确保*-window出现在最后。或者，您可以使用以下属性选择器来选择包含的属性，至少出现一次值-window。 (example) ..这假设没有其他类包含子串-window。非常罕见，但仍有可能。

div[class*="-window"] {
    color:red;
}