w3schools가 표현하는 방식 은 동일하게 들립니다.
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 다음의 첫 번째 단락에만 빨간색 텍스트가 있습니다.
일반 형제 선택자 X ~ Y
~ 결합자는 두 선택자를 분리하고 첫 번째 요소가 선행되고 둘 다 공통 부모를 공유하는 경우에만 두 번째 요소와 일치합니다.
ul ~ p {
color: red;
}
이 형제 결합자는 X + Y와 비슷하지만 덜 엄격합니다. 인접한 선택자 (ul + p)는 이전 선택자 바로 앞에있는 첫 번째 요소 만 선택하지만, 이것은 더 일반화됩니다. 위의 예를 참조하여 ul을 따르는 한 모든 p 요소를 선택합니다.
출처
답변
<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
답변
