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

【问题标题】：CSS - greater than selector - select items greater than NCSS - 大于选择器 - 选择大于 N 的项目
【发布时间】：2012-09-24 01:13:52
【问题描述】：

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

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

【问题讨论】：

:gt(2) 据我所知是 jQuery 特有的东西。

标签： html css css-selectors

【解决方案1】：

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

p + p ~ p {
    display: none;
}

JS Fiddle demo.

你也可以使用：

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

JS Fiddle demo.

参考资料：

【讨论】：

@BoltClock：绝对，但在撰写本文时，该建议已经发布在其他地方，虽然它的包含会改善这个答案，但感觉太像无耻的复制（即使我归因于给原作者）。

【解决方案2】：

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

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

【讨论】：

这不是“只是一个 jQuery 速记”。这是一个完全不同的选择器。

【解决方案3】：

你可以使用兄弟选择器：

p + p + p {display:none;}

除了前两个以外，全选！

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

【讨论】：