>  기사  >  웹 프론트엔드  >  CSS의 \" \" 조합자는 어떻게 형제 요소 바로 다음에 오는 요소를 대상으로 합니까?

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

Barbara Streisand
Barbara Streisand원래의
2024-10-30 20:29:30280검색

How Does the

CSS의 " " 조합자 이해

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

개념 시각화

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

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

<h2>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.