CSS属性选择器未选择

Question

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

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

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

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

这是一种享受.我还有三个以-window(.one-window,.two-window等)结尾的div,我尝试选择它们

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

我一无所获.如果我用传统的方式设计它们

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

这很好用.

有任何想法吗？

Answer 1

CSS3选择器 - 6.3.2.子串匹配属性选择器

[ATT $ = VAL]

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

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

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

将选择上述HTML,因为该属性以*-window- (示例)结尾.

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

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

鉴于上述情况不会被选中 - (例)

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

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

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