주어진 요소 바로 앞의 요소를 선택하는 방법: CSS의 ' '(더하기) 및 '~'(물결표) 인접 형제 선택자를 이해합니까?
- Mary-Kate Olsen원래의
- 2024-10-26 18:30:301106검색
인접 형제 선택자: div p(더하기)와 div ~ p(물결표)의 차이점 이해
CSS 선택기로 작업할 때, div p(더하기) 선택기와 div ~ p(물결표) 선택기 간의 차이점을 파악하는 것이 중요합니다. 비슷하게 들리지만 의미는 크게 다릅니다.
div p(Plus) 선택기
div p 선택기는 모든
바로 뒤에 배치되는 요소 강요. 이는
요소는 이전
요소의 직계 형제여야 합니다. elements.
div ~ p(물결표) 선택기
div p 선택기와 달리 div ~ p 선택기는 모든
앞에 오는 요소 강요. 여기에는 직계 형제자매뿐만 아니라 다른
뒤에 오는 요소 요소를 문서 트리에 추가하세요.
올바른 선택기 선택
주어진 요소 바로 앞에 있는 요소를 선택하는 것과 관련된 쿼리를 해결하려면 다음 구문을 사용해야 합니다.
E1 E2
이 선택자는 요소 E1 바로 앞에 있는 요소 E2와 일치합니다. 귀하의 경우 div p를 사용하여
에 인접하고 선행하는 요소 요소.
예
다음 HTML 및 CSS 코드를 고려하세요.
<code class="html"><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></code>
<code class="css">ul + p {
color: red;
}</code>
이 예에서는
위 내용은 주어진 요소 바로 앞의 요소를 선택하는 방법: CSS의 ' '(더하기) 및 '~'(물결표) 인접 형제 선택자를 이해합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.