如何顯示塊的前N個元素並將其他元素隱藏在css中？

Question

我試圖隱藏具有塊.container內的類.row第一3個元素。

我在做什麼是隱藏所有的.row第一，然後我試圖通過使用.row:nth-child(-n+3)

的jsfiddle這裏顯示的前3 .row：http://jsfiddle.net/z8fMr/1/

我這裏有兩個問題：

1. 第3行沒有顯示，我使用的第n個孩子在錯誤的道路？
2. 難道還有比隱藏一切，然後創建一個特定的規則，以顯示我想要的N個第一要素一個更好的做法？有沒有在CSS的方式只顯示前3 .row，然後隱藏所有其他.row？

謝謝。

Answer 1

1. 你有.notarow作爲第一個孩子，所以你必須在你的:nth-child()公式考慮到這一點。正因爲如此.notarow的，你的第一個.row成爲父母的第二個孩子的整體，所以你必須計算開始從第二到第四：

   .row:nth-child(-n+4){ 
       display:block; 
   } 
   

   Updated fiddle

2. 你在做什麼是好的。

Answer 2

你甚至都不需要CSS3選擇：

.row + .row + .row + .row { 
    display: none; 
} 

這應該工作，即使在IE7。
Updated fiddle

Answer 3

此外，像喬瓦尼的解決方案，這樣的事情也可以工作。

.container > .row:nth-child(3) ~ .row { 
    /* this rule targets the rows after the 3rd .row */ 
    display: none; 
}