隱藏除前兩個段落以外的長文本

我有一個非常長的文本，我需要隱藏除前兩個段落以外的所有內容。由於各種原因，我寧願不使用jQuery的這個網站。這可以用CSS來完成嗎？我知道第n孩子最有可能會做的伎倆，但我有麻煩提出了一個具體的規則。隱藏除前兩個段落以外的長文本

<div class="text"> 
<p>display</p> 
<p>display</p> 
<p>hide from this point</p> 
<p>...</p> 
</div>

2012-03-31 Barbara

你打算在某些事件發生後顯示文字嗎？該文本甚至有必要在那裏？我想解決方案取決於爲什麼文本需要保留在頁面上，即使它不可見。 – biggles 2012-03-31 17:25:12

'n-child'是顯而易見的解決方案，但它只在更新的（對於給定數量的「新」）瀏覽器支持，請參閱http://caniuse.com/#search=nth-child。 – kopischke 2012-05-07 12:11:59

@kopischke我知道，但我看着我的統計數據，而且我的大多數訪問者都使用chrome或firefox。一些IE9，唯一的問題是IE8的問題。我必須爲他們找到解決方法或使用jQuery。 – Barbara 2012-05-08 09:27:12

此代碼會給你想要的結果：

div.text > p:nth-child(n+3){ 
    display:none; 
}

2012-03-31 17:29:00 Engineer

是的，這可以用CSS

  div p:nth-child(3){ } 
     div p:nth-child(4){ } 
     div p:nth-child(5){ }

做這是你在找什麼？

2012-03-31 17:23:02 AgnosticDev

使用

.text p { 
    display:none; 
} 

.text p:nth-child(-n+3) { 
    display:block; 
}

以上會隱藏第二之後的任何段落。更多關於CSS的子女here。

2012-03-31 17:25:55 cplusplus

將使用+或~選擇（RESP相鄰的和一般的同胞選擇，與IE7 + OK。）更兼容的方式：

.text p ~ p ~ p { 
    display: none; 
}

如果你是某些只有段落，你也可以使用+。如果你有一個列表，一個子標題，blockquote或2段之間的任何內容，那麼只有~將匹配非p元素後面的段落。
前兩個段落前面沒有兩個段落，因此它與選擇器規則不匹配，它們仍然顯示。接下來的都是兩段（至少），所以它們將被隱藏。

編輯：：nth-child（）是一個完全有效的答案，但它不會與IE8一起使用。

2012-03-31 17:30:16 FelipeAls

謝謝。這應該使舊式IE瀏覽器能夠正常工作。還沒有測試過，但我發佈它作爲參考。 http://selectivizr.com/ http://caniuse.com/#search=nth-child – Barbara 2012-03-31 21:26:17

缺點：這種類型的腳本會減慢已經是最慢瀏覽器的瀏覽器，並且顯然只有在執行JS時才起作用。但是如果經過測試，它仍然會滿足（適合？）您的需求，它的工作原理。 – FelipeAls 2012-04-01 07:28:47

我知道，但看着統計數據，這只是我訪客中的一小部分。不能相信其中9個仍在使用IE6。無論如何，最壞的情況下，他們會看長段文字。 – Barbara 2012-04-01 12:50:50

回答