CSS - 大於選擇器 - 選擇大於N的項目

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小提琴演示。

你也可以使用：

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

JS小提琴演示。

參考文獻：

Answer 2

：gt只是一個jQuery的短手，在css中選擇它：

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

Answer 3

你可以使用兄弟選擇器：

p + p + p {display:none;}

除了前兩個，它選擇所有！

CSS - 大於選擇器 - 選擇大於N的項目

問題描述

3 個解決方案

解決方案1
20 已采納 2012-09-23 16:41:40

解決方案2
5 2012-09-23 16:44:45

解決方案3
3 2012-09-23 16:41:58

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

CSS - 大於選擇器 - 選擇大於N的項目

問題描述

3 個解決方案

解決方案1 20 已采納 2012-09-23 16:41:40

解決方案2 5 2012-09-23 16:44:45

解決方案3 3 2012-09-23 16:41:58

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

解決方案1
20 已采納 2012-09-23 16:41:40

解決方案2
5 2012-09-23 16:44:45

解決方案3
3 2012-09-23 16:41:58