css - 第 n 个 child 计数序列

Question

我有一个简单的 HTML 结构，我只想显示第二个带有“entry”类的 DIV:

<div id="wrapper">
    <div class="highlight">Hightlight</div>
    <div class="entry">Entry 1</div>
    <div class="entry">Entry 2</div>
    <div class="entry">Entry 3</div>
    <div class="entry">Entry 4</div>
</div>

因此我使用 nth-child(x)试图实现它的伪选择器:

#wrapper .entry {
    display: none;
}
#wrapper .entry:nth-child(2) {
    display: block;
}

但最终，“条目 1”出现了。 :nth-child(x)如何数数？它忽略了选择器 .entry完全计算 <div> 的出现次数类。

演示:JSFiddle

Answer 1

It ignores the selector .entry completely and just count the occurrence of <div> class.

这几乎是正确的。它的工作原理是:

1. 它需要所有的div类 entry 的元素
2. 它需要所有的div作为其父元素的第二个元素的元素
3. 它取 1) 和 2) 的交集

你真正想要的是像 nth-of-class 这样的东西，这不是什么东西(我认为有人建议在下一个版本的 CSS 中添加它)。