我有一些<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;
}
JS 小提琴演示 http://jsfiddle.net/davidThomas/NBurh/.
您还可以使用：
p:nth-of-type(2) ~ p {
display: none;
}
JS 小提琴演示 http://jsfiddle.net/davidThomas/NBurh/1/.
参考：
-
CSS 选择器 http://www.w3.org/TR/css3-selectors/#selectors.
-
CSS :nth-of-type()伪类 http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo.
-
相邻兄弟姐妹 (+) 组合器 http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators.
-
一般兄弟姐妹（~) 组合器 http://www.w3.org/TR/css3-selectors/#general-sibling-combinators.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
