Разница между селекторами div + p (plus) и div ~ p (тильда)

Ответ 1

Смежные селекторные ролики X + Y

Смежные селекторные группы имеют следующий синтаксис: E1 + E2, где E2 является предметом селектора. Селектор соответствует, если E1 и E2 совместно использовать один и тот же родительский элемент в дереве документов, а E1 сразу предшествует E2, игнорируя неэлементные узлы (такие как текстовые узлы и комментарии).

ul + p {
   color: red;
}

В этом примере он выберет только элемент, которому сразу предшествует прежний элемент. В этом случай, только первый абзац после каждого ul будет иметь красный текст.

ul + p {
    color: red;
}

<div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div>

Ответ 2

Если элемент <p> находится сразу после элемента <div>, не означает ли это, что элементу <p> предшествует элемент <div>?

Это правильно. Другими словами, div + p является собственным подмножеством div ~ p - все, что соответствует первому, также подлежит последнему по необходимости.

Разница между + и ~ заключается в том, что ~ соответствует всем следующим братьям и сестрам независимо от их близости от первого элемента, если они оба имеют один и тот же родитель.

Оба эти пункта наиболее кратко проиллюстрированы одним примером, где каждое правило применяет другое свойство. Обратите внимание, что один p, который сразу же следует за div, имеет оба правила:

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

Ответ 3

рассмотрим этот пример:

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p after a preceding p */
   font-weight: bold;
} 

<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>

Ответ 4

1) Смежные селекторы (S1 + S2)

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

div + p {
    color:red;
}

Пример смежных селекторов

2) Общие селекторы братьев и сестер (S1 ~ S2)

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

div ~ p {
   color:red;
}

Пример общего выбора братьев и сестер

Селектор смежного брата (S1 + S2) и общего брата (S1 ~ S2):

Селектор соседнего брата (S1 + S2) выбирает только непосредственный элемент брата, но общий селектор брата (S1 ~ S2) выбирает все элементы брата другого указанного элемента. В обоих случаях оба элемента (S1 и S2) должны находиться на одном уровне.