隐藏除前两段之外的长文本

Question

我有一个很长的文字，我需要隐藏除前两段之外的所有内容。 出于各种原因，我宁愿不为这个网站使用jquery。这可以用css完成吗？ 我知道nth-child很可能会做这个伎俩，但我遇到了一个特定规则的麻烦。

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

Answer 1

此代码将为您提供所需的结果：

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

Answer 2

使用

.text p {
    display:none;
}

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

以上将隐藏第二个之后的任何段落。有关CSS nth-child here的更多信息。

Answer 3

是的，可以使用CSS

完成

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

这是你在找什么？

Answer 4

更兼容的方式是使用+或~选择器（相应的邻近和一般兄弟选择器，使用IE7 +即可）：

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

如果您某些只有段落，您也可以使用+。如果您有一个列表，一个子标题，块引用或两段之间的任何内容，那么只有~将匹配该非p元素后面的段落。
前两个段落前面没有两个段落，因此它与选择器规则不匹配，它们仍然显示。

表示接下来会有两段（至少），因此它们将被隐藏。

编辑:: nth-child（）是一个完全有效的答案，但它不适用于IE8。