如何隐藏CSS中元素位置之后剩余的元素？

Question

我正在使用CSS选择器来隐藏元素，但我不知道如何在

nth-child

中做到这一点，我想隐藏元素位置5之后的所有剩余元素。我如何使用nth-child做到这一点？

<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div> 
<div class="item">item 6</div> // hidden
<div class="item">item 7</div> // hidden
<div class="item">item 8</div> // hidden
...etc...

Answer 1

试试这个

div:nth-child(n+6) {
    display: none;
}

div:nth-child(n+6) {
    display: none;
}

<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div> 
<div class="item">item 6</div> // hidden
<div class="item">item 7</div> // hidden
<div class="item">item 8</div> // hidden

更多详情