Question

如果我有以下HTML：

<div class="list">
    <div class="item">First</div>
    <div class="item">Second</div>
    <div class="item">Third</div>
</div>
<div class="list">
    <div><div class="item">First</div></div>
    <div><div class="item">Second</div></div>
    <div><div class="item">Third</div></div>
</div>

和CSS：

.list .item { background: #00ff00; }
.list .item:nth-child(1n+2) { background: none; } /*remove bg on all but the 1st one*/

如何让第二个项目列表与第一个项目一样？

我知道我能做到：

.list div:nth-child(1n+2) .item { background: none; }

但重点是div和list之间可能有item个任意级别。

JSFiddle

Answer 1

如果:nth-child()仅适用于第一级后代，但.item也可能出现在第一级，you will probably need two separate selectors：

.list > .item:nth-child(n+2), 
.list > div:nth-child(n+2) .item { background: none; }

注意前两个选择器之间的>，以及第二行中最后两个选择器之间的空格。 >确保:nth-child()仅适用于.list元素之后的第一级后代。该空间确保始终将最里面的.item元素作为目标，无论其深度如何。

另请注意，1n+2相当于n+2; 1隐含just like a mathematical coefficient。

Answer 2

更改此

.list div:nth-child(1n+2) .item { background: none; }

到这个

.list > .item:nth-child(n+2), .list > div:nth-child(n+2) .item { 
    background: none;
}

nth-child跳过任意数量的级别

2 个答案: