Блог

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

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

#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/

Метки: