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

如these中提到的两个answers（以及this new one），CSS3不会在选择其类的第一个元素的伪类中进行烘焙（与{{1不同）按类型选择）。

如果保证:first-of-type成为:first-child的第一个孩子，则始终可以使用.current：

.group

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

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

一般兄弟组合子.group .current { background: red; } .group .current ~ .current { background: transparent; /* Or whatever your default is */ }忽略了可能不是~的其他元素。所有这些规则都适用于IE7 +。

Answer 4

如果它们遍布整个页面，那么您无法通过纯CSS解决方案获得所需的内容。即使使用first-of-type，除非元素位于相同的DOM级别。检查the example，看看您无法选择元素。

另一方面，一旦我将第三个.current移动到我已经有第二个I get only the second item selected的同一个DOM级别，因为它是此级别上的第一个.current。

另一方面，这是一个非常short one-liner in JS

不要过于复杂化;）

Answer 5

如果它遍布整个页面，则无法使用css进行定位。

CSS：使用类的第一个孩子

5 个答案: