CSS - больше, чем селектор - выбрать элементы больше, чем N

У меня есть несколько<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> 

Мой код по-прежнему показывает все 4 элемента абзаца в веб-браузере Chrome.

Как я могу исправить свой код для достижения цели, которую я первоначально заявил?

 Raghu23 сент. 2012 г., 18:45
Насколько я знаю, gt (2) - это специфическая вещь для jQuery.

Ответы на вопрос(3)

: gt это просто короткая рука jQuery, выбрать его в css:

p:nth-of-type(n+3)
 23 сент. 2012 г., 19:12
Это не "просто сокращение jQuery". Это совершенно другой селектор.
 23 сент. 2012 г., 20:20
Это имеет точно такую же функцию и короче, если я не ошибаюсь.
Решение Вопроса

Если они братья и сестры, то самый простой подход с некоторой обратной совместимостью будет:

p + p ~ p {
    display: none;
}

JS Fiddle demo.

Вы также можете использовать:

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

JS Fiddle demo.

Рекомендации:

CSS Selectors. CSS :nth-of-type() pseudo-class. Adjacent sibling (+) combinators. General sibling (~) combinators.
 23 сент. 2012 г., 19:12
Или жеp:nth-of-type(n+3).
 23 сент. 2012 г., 19:14
@BoltClock: абсолютно, но на момент написания этого предложения оно уже было опубликовано в другом месте, и хотя его включение улучшило бы этот ответ, оно было бы слишком похоже на беспардонное копирование (даже если бы я приписал его первоначальному автору).

Вы можете использовать селектор брата:

p + p + p {display:none;}

Кроме первых двух, он выбирает все!

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

Ваш ответ на вопрос