разница между общим родственным комбинатором (~) и дочерним селектором (›) в css

Я читал о CSS последние пару дней и искал в Интернете этот вопрос.

Может ли кто-нибудь объяснить мне, в чем разница между (~) и (>)?


css css-selectors siblings
person Mikkel Raicevic-Larsen    schedule 04.04.2014    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Общий родственный элемент означает, что элемент находится после другого элемента, где дочерний селектор нацелен на элементы, которые находятся непосредственно внутри определенных элементов.

Братья и сестры:

HTML:

<div class="brother"></div>
<div class="sister"></div>

CSS:

.brother ~ .sister {
    /* This styles .sister elements that follow .brother elements */
}

Дети:

HTML

<div class="parent">
    <div class="child">
        <div class="child"></div>
    </div>
</div>

CSS:

.parent > .child{
    /* This styles .child element that is the direct child of the parent element;
    It will not style the .child element that is the child of .child */
}
person Dryden Long    schedule 04.04.2014
comment
Обратите внимание, что комбинаторы братьев и сестер могут соответствовать только следующим братьям и сестрам, поэтому, например, если у вас есть .sister перед .brother, .brother ~ .sister не будет соответствовать ему. - person BoltClock; 04.04.2014
comment
@BoltClock Хороший улов, я упустил эту деталь, сейчас обновлю свой пост. - person Dryden Long; 04.04.2014
comment
Хм, сразу последуйте - это будет комбинатор + (соседний брат). ~ соответствует всем последующим братьям и сестрам в том же родительском элементе. - person BoltClock; 04.04.2014
comment
Все еще не ясно, что, если в примере родитель-потомок был еще один ‹div class=child› после непосредственного потомка. Какова будет разница для двух селекторов? - person Mikkel Raicevic-Larsen; 04.04.2014
comment
@MikkelRaicevic-Larsen Нет проблем, рад, что смог помочь! - person Dryden Long; 04.04.2014

arrow_upward
0
arrow_downward

Ниже приведены некоторые примеры, показывающие, как используются селекторы CSS...
Пример:

div>p

Приведенное выше выбирает все элементы p, где родителем является элемент div. Пример:

p~ul

Вышеупомянутый выбирает каждый элемент ul, который предшествует элементу p

person Mudassir    schedule 04.04.2014