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

<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.

Ответ 1

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

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

Поддержка браузера очень сильная, но альтернативы включают в себя:

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

* + p { color: red; }

Ответ 2

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

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

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

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

смежный селектор селектора, который соответствует любому p, который появляется непосредственно после p:
```
p + p { color: red; }
```
общий селектор, который соответствует любому p, который приходит где-то после p:
```
p ~ p { color: red; }
```

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

Ответ 3

Я думаю, что :nth-child() сделает трюк.

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

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

Ответ 4

Работает каждый раз и не нуждается в отмене:

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

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

Ответ 5

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

<!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 в режиме compaitbility

Ответ 6

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

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

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