第n個孩子中嵌套的div

我試圖隱藏最近3周的div類名.latest-item：第n個孩子中嵌套的div

<div class="latest-group"> 

      <div class="latest-1 latest-item latest-sort-1"> 
       <h3>Title</h3> 
       <p>Paragraph</p> 
      </div><!--end latest-1--> 

      <div class="latest-2 latest-item latest-sort-2"> 
       <h3>Title</h3> 
       <p>Paragraph</p> 
      </div><!--end latest-2--> 

      <div class="latest-3 latest-item latest-sort-3"> 
       <h3>Title</h3> 
       <p>Paragraph</p> 
      </div><!--end latest-3--> 

      </div><!--end latest-group--> 

      <div class="latest-group"> 

      <div class="latest-4 latest-item latest-sort-1"> 
       <h3>Title</h3> 
       <p>Paragraph</p> 
      </div><!--end latest-4--> 

      <div class="latest-5 latest-item latest-sort-2"> 
       <h3>Title</h3> 
       <p>Paragraph</p> 
      </div><!--end latest-5--> 

      <div class="latest-6 latest-item latest-sort-3"> 
       <h3>Title</h3> 
       <p>Paragraph</p> 
      </div><!--end latest-6--> 

      </div><!--end latest-group-->

和CSS：

.latest-item:nth-child(n+3) { 
      display:none; 
     }

我不能正確地瞄準div的類名稱.latest-item。在jQuery中，我可以這樣做：

$（「。latest-item」）。slice（3）.hide（）;

這裏有一個小提琴：

http://jsfiddle.net/nMbm5/

來源

2012-09-04 Yahreen

聽起來這是CSS的時刻一個缺點。使用JavaScript來代替：

$(".latest-item").slice(3).hide();

來源

2012-09-05 19:08:58 Yahreen

我認爲你需要使用nth-last-child和last-child代替：http://jsfiddle.net/nMbm5/1/

來源

2012-09-05 00:06:05

它不會工作，如果在不同的'.latest-group' 3'.latest-item'跨度，但.. – Zendy

@zen因此，在這種情況下，要得到它的跨跨越3個不同的'.latest-group' div，我需要用js解決方案嗎？ – Yahreen

@Yahreen快速回答是的，你應該使用js..因爲當你使用下面的代碼時，它會從不同的'.latest-group'中選擇最後2個'.latest-item'。我不知道這是不是CSS3中的bug。 .latest-item：第n個最後一個孩子（-n + 2）{ background：red; } – Zendy

第n個孩子中嵌套的div

回答

相關問題