隐藏范围之间的增量值
隐藏范围之间的增量值
提问于 2016-07-25 16:59:57
以下面的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任务？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-25 17:01:58
您可以使用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+项将不会对性能产生任何影响。
Stack Overflow用户
发布于 2016-07-25 17:06:15
您可以通过向divs添加另一个类来用css隐藏它们的其余部分。像这样
//CSS class
.hide {
display: none;
}然后将类添加到您想要隐藏的divs的其余部分，如下所示
<div id="blog-7" class="blog-wrapper hide">some content</div>
<!-- and so on -->页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38563511
复制相关文章
相似问题
腾讯云开发者
