it-swarm.com.ru

Что такое синтаксис для селектора в 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;
}

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

184
tony noriega

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

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

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

370
Josh Stodola

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

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

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

54
Stephan Muller

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

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

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

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

13
Moin Zaman

> - это дочерний селектор . Так что, если ваш 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;
}
8
Richard JP Le Guen

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

1
Justin Russell