Что такое синтаксис для селектора в CSS для следующего элемента?

Question

Если у меня есть тег заголовка <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

и после этого у меня есть абзац <p>stuff here</p>.

Как я могу обеспечить использование CSS для каждого тега <p>который следует за h1.hc-reform для использования: clear:both;

это будет:

h1.hc-reform > p{
     clear:both;
}

по какой-то причине это не работает.

Answer 1

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

h1.hc-reform + p {
  clear:both;
}

Примечание: это не поддерживается в IE6 или более ранней версии.*

Answer 2

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

h1.hc-reform ~ p{
     clear:both;
}

Выбирает все элементы p, которые идут после .hc-reform, а не только первый.

Answer 3

нет > является дочерним селектором.

тот, который вы хотите +

так что попробуйте h1.hc-reform + p

поддержка браузера не очень хорошая

Answer 4

> является дочерним селектором .Так что если ваш HTML выглядит так:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... тогда это ваш билет.

Но если ваш HTML выглядит так:хотите соседний селектор :

h1.hc-reform + p{
     clear:both;
}

Answer 5

Не совсем.h1.hc-reform > p означает «любой p ровно на один уровень ниже h1.hc-reform».

То, что вы хотите, это h1.hc-reform + p.Конечно, это может вызвать некоторые проблемы в старых версиях Internet Explorer;если вы хотите сделать страницу совместимой со старыми IE, вам придется либо добавить класс вручную в абзацы, либо использовать JavaScript (например, в jQuery вы можете сделать что-то вроде $('h1.hc-reform').next('p').addClass('first-paragraph')).

Дополнительная информация: http://www.w3.org/TR/CSS2/selector.html или http://css -tricks.com / дочерние и дочерние элементы / / 1014 *