#html #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;
}
по какой-то причине это не работает.
Ответ №1:
Это называется селектором соседних братьев и сестер, и он представлен знаком плюс…
h1.hc-reform p {
clear:both;
}
Примечание: это не поддерживается в IE6 или более ранних версиях.
Комментарии:
1. Это позволит выбрать только
p
то, что будет сразу послеh1.hc-reform
. С другой стороны, это может быть единственное, чтоclear: both
нужно применить, чтобы оно работало, так как оно просто очищаетh1
поплавок, так что это все еще правильный ответ.2. @BoltClock Да, вы правы, я неправильно прочитал спецификацию и удалил этот комментарий, потому что он был неправильным. Этот селектор будет соответствовать только тому
p
, что непосредственно предшествуетh1.hc-reform
(с тем же родительским элементом, конечно).3. вау не знал о соседнем селекторе братьев и сестер. Хорошо, спасибо!
4. ~ в данном случае это лучший выбор. Вот рабочий JSfiddle jsfiddle.net/dZAtt
5. стоит отметить, что это не работает, если у первого элемента есть какие-либо дочерние элементы
Ответ №2:
Вы можете использовать селектор братьев ~
и сестер:
h1.hc-reform ~ p{
clear:both;
}
При этом выбираются все p
последующие элементы .hc-reform
, а не только первый.
Комментарии:
1. Ошибки IE в первой ссылке являются неясными краевыми случаями, и, вероятно, поэтому quirksmode не замечает их.
Ответ №3:
нет >
-это селектор детей.
тот, кого вы хотите, это
так что попробуй h1.hc-reform p
поддержка браузера невелика
Комментарии:
1. 2020: Поддержка браузера отлично работает спустя десять лет. Просто информация для новичков в CSS.
Ответ №4:
Это >
дочерний селектор. Итак, если ваш 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;
}
Комментарии:
1. Я очень надеюсь, что он не вложил p в h1.. Кроме того, рядом выбирается только первый п.
Ответ №5:
Не совсем так. Это h1.hc-reform > p
означает «любой p
ровно один уровень ниже h1.hc-reform
«.
Чего ты хочешь, так это h1.hc-reform p
. Конечно, это может вызвать некоторые проблемы в старых версиях Internet Explorer; если вы хотите сделать страницу совместимой со старыми версиями, вам придется либо добавлять класс вручную в абзацы, либо использовать некоторый 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/