隐藏范围之间的增量值

Question

所以采取以下HTML: -

<div id="news-archive">
    <div id="blog-1" class="blog-wrapper">some content</div>
    <div id="blog-2" class="blog-wrapper">some content</div>
    <div id="blog-3" class="blog-wrapper">some content</div>
    <div id="blog-4" class="blog-wrapper">some content</div>
    <!-- and so on -->
</div>

并且假设博客增量继续增加到150.

是否可以使用CSS仅显示前6个div,即#blog-1通过#blog-6然后隐藏其余部分或者这是一个jQuery作业？

Answer 1

您可以使用nth-child选择器在CSS中实现此目的:

#news-archive div {
    display: none;
}
#news-archive div:nth-child(-n+6) {
    display: block;
}

#news-archive div {
    display: none;
}
#news-archive div:nth-child(-n+6) {
    display: block;
}

<div id="news-archive">
    <div id="blog-1" class="blog-wrapper">some content 1</div>
    <div id="blog-2" class="blog-wrapper">some content 2</div>
    <div id="blog-3" class="blog-wrapper">some content 3</div>
    <div id="blog-4" class="blog-wrapper">some content 4</div>
    <div id="blog-5" class="blog-wrapper">some content 5</div>
    <div id="blog-6" class="blog-wrapper">some content 6</div>
    <div id="blog-7" class="blog-wrapper">some content 7</div>
    <div id="blog-8" class="blog-wrapper">some content 8</div>
    <div id="blog-9" class="blog-wrapper">some content 9</div>
    <div id="blog-10" class="blog-wrapper">some content 10</div>
    <div id="blog-11" class="blog-wrapper">some content 11</div>
    <div id="blog-12" class="blog-wrapper">some content 12</div>
</div>

但是,使用AJAX来加载仅需要的元素可能是值得的,因为在页面上加载140个以上永远不会使用的项目会影响性能而不会带来任何好处.