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个以上永远不会被使用的项目会影响性能，但没有任何好处。

Answer 2

您可以通过向divs添加另一个类来隐藏css的其余部分。喜欢这个

//CSS class
.hide {
    display: none;
}

然后将该类添加到您要隐藏的divs的其余部分

<div id="blog-7" class="blog-wrapper hide">some content</div>
<!-- and so on -->

隐藏范围之间的增量值

2 个答案: