8

<p>HTML 本文にいくつかの要素があります。最初の 2 つの段落のみを表示し、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 Web ブラウザーで 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 は、css で選択するための単なる jQuery の省略形です。

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

兄弟セレクターを使用できます：

p + p + p {display:none;}

最初の2つ以外は全部選択！

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

于 2012-09-23T16:41:58.307 に答える