我有几个< p>我的
HTML正文中的元素.我只想显示前两段,并将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个段落元素.
如何更正我的代码以实现我最初声明的目标？
解决方法
如果他们是兄弟姐妹,那么具有一些向后兼容性的最简单方法将是：
p + p ~ p {
display: none;
}
你也可以使用：
p:nth-of-type(2) ~ p {
display: none;
}
参考文献：
> CSS Selectors
> CSS :nth-of-type() pseudo-class.
> Adjacent sibling (+) combinators.
> General sibling (~) combinators
