Question

我有一个简单的HTML结构，我想只显示带有类＆＃34;条目＆＃34;的第二个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;
}

但结束了，＆＃34;条目1＆＃34;而是显示出来。 :nth-child(x)如何计算？它完全忽略了选择器.entry，只计算<div>类的出现次数。

演示：JSFiddle

Answer 1

它完全忽略了选择器.entry，只计算<div>类的出现次数。

这几乎是正确的。它是如何工作的：

它会将所有div元素与类entry
它将所有div个元素作为其父元素的第二个元素
需要1）和2）的交集

你真正想要的是像 nth-class-class 这样的东西，这不是一件事（我认为有一个建议将它添加到下一版本的CSS中）。

Answer 2

你应该这样做

#wrapper .entry { /* hiding first */
    display: none;
}

#wrapper .entry + .entry /* showing second and following */
{
    display: block;
}

#wrapper .entry + .entry + .entry /* hiding third and following */ 
{
   display:none; 
}

不是很漂亮，但会起作用。

在此处查看：http://jsfiddle.net/rwvzq4sL/1/

第n个孩子的计数序列

2 个答案: