CSS의 \' \' 조합자는 어떻게 형제 요소 바로 다음에 오는 요소를 대상으로 합니까?

CSS의 " " 조합자 이해

CSS는 " " 조합자를 사용하여 특정 형제 바로 뒤에 오는 요소를 대상으로 합니다. 예를 들어 "h2 p" 규칙에서는 h2 요소 바로 뒤의 p 요소만 지정된 스타일의 영향을 받습니다.

개념 시각화

고려하세요. 다음 HTML 코드:

<code class="html"><h2 id="Headline">Headline!</h2>
<p>The first paragraph.</p> <!-- Selected [1] -->
<p>The second paragraph.</p> <!-- Not selected [2] -->

<h2 id="Another-headline">Another headline!</h2>
<blockquote class="quote">
    <p>A quotation.</p> <!-- Not selected [3] -->
</blockquote></code>

"h2 p" 선택기를 적용하는 경우:

• [1] 첫 번째 단락(

  ) h2(

  ) 요소 바로 뒤에 있으므로 선택되었습니다.

• [2] 두 번째 단락(

  )은 첫 번째 단락 뒤에 있으므로 선택되지 않습니다. h2 요소가 아닙니다.

• [3] 인용문 앞에 h2가 없기 때문에 인용문(

  ) 내의 단락은 선택되지 않습니다.

"~" 조합자와 비교

" " 조합자는 직계 형제 요소만 선택합니다. 반면에 "~" 조합자는 직계 형제 요소에 상관없이 모든 요소를 ​​선택합니다. 위치. 예를 들어 "h2 ~ p"는 위 HTML의 두 단락을 모두 선택하는 반면, "h2 p"는 첫 번째 단락만 선택합니다.

위 내용은 CSS의 \' \' 조합자는 어떻게 형제 요소 바로 다음에 오는 요소를 대상으로 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!