CSS 属性选择器未选择

Question

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

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

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

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

这是一种享受。我还有三个以 -window (.one-window, .two-window etc ) 结尾的 div，我尝试用

选择它们

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

我一无所获。如果我使用传统的样式来设计它们

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

这很好用。

有什么想法吗？

Answer 1

CSS3 Selectors - 6.3.2. Substring matching attribute selectors

[att$=val]

Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.

因此 *-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;
}