CSS \' \' 결합자는 인접한 형제 요소를 어떻게 선택합니까?

인접 형제 선택: CSS ' ' 조합자 탐색

CSS에서 ' ' 문자는 인접 형제 조합자 역할을 합니다. . 이 다목적 연산자를 사용하면 특정 형제 요소 바로 앞에 있는 요소를 대상으로 지정하는 선택기를 지정할 수 있습니다.

기능을 설명하기 위해 다음 CSS 규칙을 분석해 보겠습니다.

h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}

이것은 규칙은 'h2' 헤더 바로 뒤에 오는 모든 'p' 요소를 대상으로 합니다. 이 조건을 충족하는 요소는 증가된 글꼴 크기, 굵은 두께, #777 색상 등 지정된 스타일 속성을 상속합니다.

다음 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>

CSS 선택기 'h2 p'는 'Headline!'이라는 라벨이 붙은 'h2' 헤더 바로 옆에 있는 첫 번째 'p' 요소만 선택합니다. 이는 예제에서 '[1]'으로 표시됩니다. 반면에 두 번째 'p' 요소는 'h2' 바로 앞에 오지 않으므로 '[2]'가 선택되지 않습니다.

또한 인접한 형제 조합자를 다음과 함께 사용할 수 있습니다. 일반 형제 결합자 '~'를 사용하면 보다 유연한 일치가 가능합니다. 예를 들어 선택기 'h2 ~ p'는 바로 인접한지 여부에 관계없이 'h2' 헤더 뒤에 나오는 모든 'p' 요소와 일치합니다.

본질적으로 CSS의 인접 형제 조합자는 다음과 같은 기능을 제공합니다. 형제 요소에 대한 상대적인 위치를 기준으로 HTML 요소를 정확하게 선택할 수 있으므로 스타일과 레이아웃을 세밀하게 제어할 수 있습니다.

위 내용은 CSS \' \' 결합자는 인접한 형제 요소를 어떻게 선택합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!