CSS :first-child 使用类答案

【问题标题】：CSS :first-child to work with classesCSS :first-child 使用类
【发布时间】：2011-12-17 04:16:57
【问题描述】：

假设我有这个标记：

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

现在这些 div 在标记中不一定彼此相邻，但可以分布在整个页面中。

我能否仅使用 CSS 仅针对第一次出现的“当前”类，我最好避免使用 javascript（目前）？

即。

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

【问题讨论】：

【解决方案1】：

我相信您正在寻找这样的东西：

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

应该做的伎俩！

【讨论】：

【解决方案2】：

:first-child 目标元素是第一个子元素，而不是给定类的第一次出现。所以这将针对所有具有current 类的元素，它们是第一个子元素。如果它们位于页面上的不同位置或根本没有，则可以是全部。

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

【讨论】：

【解决方案3】：

正如these 两个answers（以及this new one）中所提到的，CSS3 不会在选择其类的第一个元素的伪类中烘焙（与按类型选择的:first-of-type 不同）。

如果保证.current 是.group 的第一个孩子，则您始终可以使用:first-child：

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

但如果不能保证是，那么根据您的 cmets 和答案链接，因为它们都共享同一个父级，您可以这样做：

.group .current {
    background: red;
}

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

通用兄弟组合~ 忽略可能不是.current 的其他元素。所有这些规则都适用于 IE7+。

【讨论】：

正如上面评论中提到的，我在webdevout.net/test?019添加了带有 :first-child 的测试页面，它表明即使没有放置所有 .current 也可以选择第一个 .current在同一父级或任何特定顺序内。我错过了什么吗？
@spliter：突出显示的是html body ul li 的第一个孩子，所以它被匹配了。如果您将ul 移到其他位置，则div 仍将匹配。
你是绝对正确的，@BoltClock。试过了，确实，在这种情况下测试不是很准确。谢谢你的解释。

【解决方案4】：

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

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

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

不要把事情复杂化;)

【讨论】：

【解决方案5】：

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

【讨论】：