Question

我的HTML正文中有几个<p>个元素。我只想显示前两段，然后将display:none设置为后面的所有段落。为什么以下代码不起作用？

<html>

<head>
    <style type="text/css">
        p:gt(2) { display:none; }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</body> 

</html>

我的代码仍会在Chrome网络浏览器中显示所有4个段落元素。

如何更正我的代码以实现我最初声明的目标？

Answer 1

如果他们是兄弟姐妹，最简单的方法是向后兼容：

p + p ~ p {
    display: none;
}

JS Fiddle demo

你也可以使用：

p:nth-of-type(2) ~ p {
    display: none;
}

JS Fiddle demo

参考文献：

Answer 2

：gt只是一个jQuery的短手，在css中选择它：

p:nth-of-type(n+3)

Answer 3

您可以使用兄弟选择器：

p + p + p {display:none;}

除了前两个，它选择全部！

CSS - 大于选择器 - 选择大于N的项目

3 个答案:

jsFiddle：http://jsfiddle.net/KK3mk/