선택기 div + p (더하기)와 div ~ p (물결표)의 차이점

w3schools가 표현하는 방식 은 동일하게 들립니다.

W3Schools의 CSS 참조

div + p
모든 선택 <p>후 즉시 배치 요소 <div>요소를

div ~ p
모든 선택 <p>앞에는되는 요소 <div>요소를

<p>요소가 요소 바로 뒤에 있으면 요소 앞에 요소가 <div>있다는 뜻이 아닙니까?<p><div>

어쨌든 주어진 요소 바로 앞에 있는 요소를 선택할 수있는 선택기를 찾고 있습니다 .

인접한 형제 선택자 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>

일반 형제 선택자 X ~ Y

~ 결합자는 두 선택자를 분리하고 첫 번째 요소가 선행되고 둘 다 공통 부모를 공유하는 경우에만 두 번째 요소와 일치합니다.

ul ~ p {
   color: red;
}

이 형제 결합자는 X + Y와 비슷하지만 덜 엄격합니다. 인접한 선택자 (ul + p)는 이전 선택자 바로 앞에있는 첫 번째 요소 만 선택하지만, 이것은 더 일반화됩니다. 위의 예를 참조하여 ul을 따르는 한 모든 p 요소를 선택합니다.

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>

출처

code.tutsplus

일반 형제 선택자 MDN

인접 형제 선택자 w3

<p>요소가 요소 바로 뒤에 있으면 요소 앞에 요소가 <div>있다는 뜻이 아닙니까?<p><div>

맞습니다. 즉, div + pA는 부분 집합 의 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>

어쨌든 주어진 요소 바로 앞에 있는 요소를 선택할 수있는 선택기를 찾고 있습니다 .

불행히도 아직 하나가 없습니다 .

이 예를 고려하십시오.

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>

1) 인접 형제 선택자 (S1 + S2)

인접한 형제 선택기는 지정된 다른 요소 바로 옆에있는 지정된 요소를 선택하는 데 사용됩니다. 두 요소는 같은 수준에 있어야합니다.

div + p {
    color:red;
}

인접한 형제 선택기 예제

2) 일반 형제 선택기 (S1 ~ S2)

일반 형제 선택기는 지정된 다른 요소의 지정된 모든 형제 요소를 선택하는 데 사용됩니다.

div ~ p {
   color:red;
}

일반 형제 선택기 예제

인접 형제 (S1 + S2) 대 일반 형제 (S1 ~ S2) 선택기 :

인접 형제 (S1 + S2) 선택기는 직계 형제 요소 만 선택하지만 일반 형제 (S1 ~ S2) 선택기는 지정된 다른 요소의 모든 형제 요소를 선택합니다. 두 경우 모두, 두 요소 (S1 및 S2)는 동일한 레벨에 있어야합니다.

나머지 선택자는 여기에 설명되어 있습니다. https://www.csssolid.com/35-css-selectors-to-remember.html