CSS 인접 형제 조합자( )는 어떻게 작동하나요?

CSS 인접 형제 조합자 이해:

CSS에서 기호는 인접 형제 조합자라고 합니다. 서로 인접해 있는 특정 HTML 요소를 대상으로 지정할 수 있습니다.

조합기는 어떻게 작동합니까?

조합기는 대상 요소(두 번째 요소)가 선택기의 요소)는 첫 번째 요소(선택기의 첫 번째 요소) 바로 뒤에 와야 합니다. 선택기가 일치하려면 두 요소 사이에 다른 요소가 없어야 합니다.

예: h2 p

다음 CSS 규칙을 고려하세요.

<code class="css">h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}</code>

이 규칙은 h2 요소에 인접한 모든 p 요소를 대상으로 합니다. 즉, h2 요소 바로 뒤에 나타나는 p 요소에만 영향을 미칩니다.

그림

이 HTML 코드를 예로 들어보세요.

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

<h2>Another headline!</h2>
<blockquote>
    <p>A quotation.</p> <!-- Not selected -->
</blockquote></code>

h2에 인접해 있는 첫 번째 p 요소만 h2 p 선택기에 의해 선택됩니다. 두 번째 p 요소는

에 의해 h2와 분리되어 있으므로 선택되지 않습니다. 인용구 내의 p 요소도 동일 블록 내에서 바로 앞에 h2 요소가 없기 때문에 선택되지 않습니다.

일반 형제 조합자와의 차이점~

달리 연결자, 일반적인 형제 연결자는 인접한 배치가 필요하지 않습니다. 서로의 위치에 관계없이 형제 요소를 선택합니다.

위 내용은 CSS 인접 형제 조합자( )는 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!