Как пропустить первого ребенка? - PullRequest
Новая
       18

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

44 голосов
/ 18 мая 2010 
<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.

Ответы [ 6 ]

76 голосов
/ 18 мая 2010

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

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

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

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

и 

* + p { color: red; }
22 голосов
/ 24 января 2012

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

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

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

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

  • соседний селектор брата , который соответствует любому p, который идет непосредственно после p: 

    p + p { color: red; }

  • Общий селектор брата , который соответствует любому p, указанному в любом месте после p: 

    p ~ p { color: red; }

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

13 голосов
/ 05 сентября 2014

Я думаю, :nth-child() справится. 

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

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

6 голосов
/ 25 марта 2013

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

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

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

2 голосов
/ 06 декабря 2012

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

<!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 в режиме совместимости

0 голосов
/ 08 мая 2019

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...