Как пропустить первенца?

<div id="main">    
  <p> one </p>    
  <p> two </p>
  <p> three </p>
  <p> four </p>
  <p> five </p>
<div>

Я не хочу сначала применять css <p>One</p>

p {color:red}

Мне нужна полная противоположность :first-child.


css css-selectors
person Jitendra Vyas    schedule 18.05.2010    source источник

Ответы (6)


arrow_upward
93
arrow_downward

С псевдоклассом отрицания:

p:not(:first-child) { color: red; }

Браузерная поддержка сейчас очень сильна, но есть альтернативы:

p { color: red; }
p:first-child { color: black; }

а также:

* + p { color: red; }
person Quentin    schedule 18.05.2010
comment
Для второго решения я бы предложил использовать p:first-child{ color:inherit; } вместо p:first-child{ color:black; }, чтобы он работал с любым предустановленным цветом. - person web-tiki; 23.02.2016

arrow_upward
22
arrow_downward

Решение Quentin :not() отлично подходит для современных браузеров:

p:not(:first-child) { color: red; }

Его альтернатива для старых браузеров также хорошо работает, за исключением того, что в ней используется правило переопределения для первого дочернего элемента. Однако это не обязательно ...

Вы можете просто использовать родственный селектор, чтобы применить то же правило, что и указанное выше, без необходимости отменять его для p:first-child. Любое из этих правил будет работать:

Оба комбинатора здесь работают одинаково; тонкие различия между ними применимы только тогда, когда у вас есть другие элементы в миксе. Подробные сведения см. По предоставленным ссылкам.

person BoltClock    schedule 23.01.2012

arrow_upward
19
arrow_downward

Я думаю, что :nth-child() добьется цели.

p:nth-child(n+2){
  background-color:red;
}

Это стилизует все теги p, кроме первого, потому что он начинается со 2-го дочернего элемента. Затем вы можете стилизовать первый тег p отдельно с помощью p:first-child.

person jjgarza    schedule 05.09.2014

arrow_upward
7
arrow_downward

Работает постоянно и не требует отмены:

p + p {
  /* do 15 special things */
}

Требуется каждый P, которому предшествовала P. Не устанавливайте свойство, чтобы отменить его позже. Вы должны только прибавлять, если можете, но не убавлять.

person Rudie    schedule 24.03.2013

arrow_upward
3
arrow_downward

Вы также можете использовать оператор "тильда" (~)

<!DOCTYPE html>
<html>
<head>
    <style> 
    p ~ p {
        background:#ff0000;
        }
    </style>
</head>
<body>

    <h1>This is a heading</h1>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>


</body>
</html>

Вот демонстрация JSFiddle http://jsfiddle.net/RpfLa/344/

Сделал быстрый тест на FF 17, Chrome 23, Safari 5.1, IE9, IE1-8 в режиме совместимости

person MonteCristo    schedule 06.12.2012
comment
Не очень эффективно, потому что 6-й P совпадает 5 раз. - person Rudie; 19.11.2013
comment
Это работает для классов, пропуская вхождение 1-го класса, поскольку правило .classX ~ .classX соответствует 2-му (предшествует 1-му), 3-му (предшествующему 2-му) и т. Д. - person Stepo; 29.05.2021

arrow_upward
0
arrow_downward

:nth-child(1n+2) хорошо сработал для меня. Это пропускает первый дочерний элемент и переходит к остальным элементам.

p:nth-child(1n+2){
  color: red; 
}

Надеюсь это поможет.

person Alfredo Barillas    schedule 08.05.2019
comment
Чем это отличается от ответа stackoverflow.com/a/25679143/6741942 от jjgarza? - person strongbutgood; 08.05.2019
comment
Если вы хотите получить несколько голосов, было бы полезно объяснить, возможно, как работает выражение в круглых скобках nth-child (ссылка developer.mozilla.org/en-US/docs/Web/CSS/:nth-child), поскольку здесь этого еще не было. - например Из веб-документации MDN: выражение представляет элементы, числовая позиция которых в серии братьев и сестер соответствует шаблону An + B для каждого положительного целого или нулевого значения n. Индекс первого элемента равен 1. Значения A и B должны быть целыми числами. - person strongbutgood; 08.05.2019