隐藏范围之间的增量值(Hiding incremental values between a range)

所以采取以下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工作吗？

So taking the following 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>

And lets say the blog increment continues to 150.

Is it possible with CSS to only show the first 6 divs, i.e. #blog-1 through to #blog-6 and then hide the rest or is this a jQuery job?

最满意答案

您可以使用第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个以上永远不会使用的项目会影响性能而不会带来任何好处。 
You can achieve this in CSS using the nth-child selector:
 
#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> 
  
 

 

However it may be worth you using AJAX to load only the required elements instead, as loading 140+ items on the page which will never be used will affect performance for no benefit.

更多推荐