8

我的 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 个段落元素。

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

4

3 回答 3

20

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

p + p ~ p {
    display: none;
}

JS 小提琴演示。

您还可以使用：

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

JS 小提琴演示。

参考：

于 2012-09-23T16:41:40.667 回答
6

:gt 只是 jQuery 的简写，在 css 中选择它：

p:nth-of-type(n+3)
于 2012-09-23T16:44:45.077 回答
3

您可以使用兄弟选择器：

p + p + p {display:none;}

除了前两个，它选择了所有！

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

于 2012-09-23T16:41:58.307 回答