Вопрос по css, html, css-selectors – CSS - больше, чем селектор - выбрать элементы больше, чем N

8

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

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

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

Ваш Ответ

3   ответа
5

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

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

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

p + p + p {display:none;}

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

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

20

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

p + p ~ p {
    display: none;
}

JS Fiddle demo.

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

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

JS Fiddle demo.

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

Или жеp:nth-of-type(n+3).
@BoltClock: абсолютно, но на момент написания этого предложения оно уже было опубликовано в другом месте, и хотя его включение улучшило бы этот ответ, оно было бы слишком похоже на беспардонное копирование (даже если бы я приписал его первоначальному автору).

Похожие вопросы