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

Если у меня есть тег заголовка <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
person tony noriega    schedule 07.09.2010    source источник

Ответы (5)


arrow_upward
431
arrow_downward

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

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

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

person Josh Stodola    schedule 07.09.2010
comment
Это выберет только p, который идет сразу после h1.hc-reform. Опять же, это может быть единственный, к которому нужно применить clear: both, чтобы он работал, поскольку он просто очищает h1 float, так что это все еще действительный ответ. - person BoltClock; 07.09.2010
comment
@BoltClock Да, вы правы, я неправильно прочитал спецификацию и удалил этот комментарий, потому что он был неправильным. Этот селектор будет соответствовать только p, которому непосредственно предшествует h1.hc-reform (конечно, с тем же родительским элементом). - person Josh Stodola; 07.09.2010
comment
ничего себе не знал о соседнем селекторе братьев и сестер. Приятно спасибо! - person theorise; 07.09.2010
comment
~ - лучший селектор в этом случае. Вот рабочий JSfiddle jsfiddle.net/dZAtt - person ProblemsOfSumit; 03.07.2013
comment
Стоит отметить, что это не работает, если у первого элемента есть дочерние элементы. - person 72GM; 14.01.2019
comment
Есть какие-нибудь полифилы для IE6? ;) - person Daniel Dewhurst; 24.02.2021
comment
@DanielDewhurst Мир тебе, дружище .. !! - person Clain Dsilva; 11.06.2021

arrow_upward
69
arrow_downward

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

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

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

person Stephan Muller    schedule 07.09.2010
comment
Ошибки IE в первой ссылке - это непонятный крайний случай, вероятно, поэтому quirksmode их игнорирует. - person Ax.; 07.09.2010

arrow_upward
15
arrow_downward

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

тот, который вам нужен, +

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

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

person Moin Zaman    schedule 07.09.2010
comment
2020 год: через десять лет поддержка браузеров стала отличной. Просто информация для новичков в CSS. - person AlexioVay; 05.01.2020

arrow_upward
8
arrow_downward

> - это дочерний селектор. Итак, если ваш 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;
}
person Richard JP Le Guen    schedule 07.09.2010
comment
Я очень надеюсь, что он не вложил p внутри h1 .. Кроме того, смежный выбирает только первый p. - person Stephan Muller; 07.09.2010

arrow_upward
2
arrow_downward

Не совсем. 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/

person Justin Russell    schedule 07.09.2010