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

200

Если у меня есть тег заголовка <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;
}

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

html css css-selectors siblings Тони Норьега
источник

Ответы:

397

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

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

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

Джош Стодола
источник
4
Вот только выбрал бы то, pчто приходит сразу после h1.hc-reform. С другой стороны, он может быть единственным, clear: bothк которому нужно применить, чтобы он работал, поскольку он просто очищает h1поплавок, так что это все еще правильный ответ.
BoltClock
@BoltClock Да, вы правы, я неправильно прочитал спецификацию и удалил этот комментарий, потому что он был неправильным. Этот селектор будет соответствовать только тому, pкоторому непосредственно предшествует h1.hc-reform(с тем же родительским элементом, конечно).
Джош Стодола
4
вау не знал про соседний селектор брата Хорошо, спасибо!
Теория
1
~ лучший выбор в этом случае. Здесь работает JSfiddle jsfiddle.net/dZAtt
ProblemsOfSumit
Стоит отметить, что это не работает, если у первого элемента есть дети
72GM
60

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

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

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

Стефан Мюллер
источник
Ошибки IE в первой ссылке - непонятные крайние случаи, поэтому, вероятно, quirksmode игнорирует их.
топор.
14

нет >это дочерний селектор.

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

поэтому постарайтесь h1.hc-reform + p

поддержка браузера невелика

Моин Заман
источник
2020: поддержка браузеров велика через десять лет. Просто информация для новичков CSS.
AlexioVay
8

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

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

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

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

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

Затем вы хотите соседний селектор :

h1.hc-reform + p{
     clear:both;
}
Ричард Дж.П. Ле Гуэн
источник
4
Я очень надеюсь, что он не вложил p в h1. Кроме того, рядом выбраны только первые p.
Стефан Мюллер,
2

Не совсем. В 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/child-and-sibling-selectors/.

Джастин рассел
источник