CSS:使用类的第一个孩子

Question

说我有这个标记:

<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>

现在这些div在标记中不一定是彼此相邻的,但可以在整个页面中传播.

我是否可以仅使用CSS定位第一次出现的类"当前",我最好避免使用javascript(现在)？

IE浏览器.

.current:first-child {
background: red;
}

Answer 1

:first-child目标元素是第一个孩子,而不是第一次出现给定的类.因此,这将针对所有具有current类的元素,即第一个子元素.如果它们位于页面上的不同位置或根本不存在,则可以是所有这些.

听起来你可能正在寻找css3选择器 first-of-type

Answer 2

我相信你正在寻找这样的东西:

.current:nth-child(1){
    background:red;
}

应该做的伎俩!

Answer 3

正如在这两个答案(以及这个新答案)中所提到的,CSS3不会在选择其类的第一个元素的伪类中进行烘焙(不同于:first-of-type按类型选择).

您可以随时使用:first-childif .current保证是第一个孩子.group:

.group .current:first-child {
    background: red;
}

但如果不能保证,那么根据你的评论和答案链接,因为他们都共享同一个父母,你可以这样做:

.group .current {
    background: red;
}

.group .current ~ .current {
    background: transparent; /* Or whatever your default is */
}

一般兄弟组合器~忽略了可能不存在的其他元素.current.所有这些规则都适用于IE7 +.