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

вот так w3schools фразы, они звучат одинаково.

ссылка CSS W3Schools

div + p
Выбирает все <p> элементы, которые помещаются сразу после <div> элементов

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

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

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

3 58
css css-selectors

3 ответа:

соседние селекторы братьев и сестер X + Y

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

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>

общие селекторы братьев и сестер X ~ Y

комбинатор ~ разделяет два селектора и соответствует второму элемент только если ему предшествует первый, и оба имеют общий родитель.

ul ~ p {
   color: red;
}

этот родственный комбинатор похож на X + Y, однако, это меньше строгий. В то время как соседний селектор (ul + p) будет выбирать только первый элемент, который непосредственно предшествует предыдущему селектору, этот более обобщенно. Он будет выбирать, ссылаясь на наш пример выше, любые элементы p, пока они следуют за ul.

ul ~ p {
  color: red;
}
<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

источник

код.tutsplus

общие селекторы братьев и сестер MDN

соседние селекторы братьев и сестер w3

86

если a <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>

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

к сожалению, нет еще.

15

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

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

p ~ p { /* all p's 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>
2