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

чомусь це не працює.

— тоні норіега
джерело

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

— ПроблемиOfSumit

Варто зазначити, що це не спрацює, якщо у першого елемента є діти

— 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;
}

— Річард JP Le Guen
джерело

4

Я впевнений, сподіваюся, що він не вклав p всередині h1's. Крім того, сусідній вибирає лише перший 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/

— Джастін Рассел
джерело