CSS의 컨테이너 내에서 클래스 요소의 첫 번째 발생을 선택하는 방법은 무엇입니까?

주어진 컨테이너에서 클래스 요소의 첫 번째 발생을 선택하기 위한 CSS 선택기

클래스를 기반으로 요소를 선택할 때 다음과 같은 특정 발생을 대상으로 해야 할 필요성이 종종 발생합니다. 특정 컨테이너 내의 첫 번째 인스턴스입니다. 이 기사에서는 이러한 정밀도를 달성하는 방법을 자세히 설명합니다.

도전 이해

ID가 "B"인 요소 내에 있는 클래스 "A"로 첫 번째 요소의 스타일을 지정해야 하는 시나리오를 생각해 보세요. . "B"가 다른 요소 "B"의 하위 요소가 아니라고 가정하면 처음에 ">" 조합을 사용하려고 시도할 수 있습니다. (자식 선택자) 및 ":first-child"(의사 클래스). 그러나 이 접근 방식은 첫 번째 "A" 요소의 위치가 동적이거나 예측할 수 없는 경우에는 부족합니다.

제한 극복

CSS3은 ":first-of-type" 의사- 클래스는 이름에서 알 수 있듯이 형제 중에서 주어진 유형의 첫 번째 요소를 선택합니다. 불행하게도 특정 클래스의 첫 번째 발생을 대상으로 하는 내장된 ":first-of-class" 의사 클래스는 없습니다.

이 제한을 우회하려면 일반 형제 결합자를 사용하여 해결 방법을 사용할 수 있습니다. "~." 이를 통해 동일한 상위 요소를 공유하는 다른 요소와의 관계를 기반으로 요소를 선택할 수 있습니다. "~"를 사용하면 컨테이너 내에서 첫 번째 "A" 요소 뒤에 오는 모든 요소를 ​​타겟팅할 수 있습니다.

솔루션 구현

이 솔루션을 구현하려면 두 가지 CSS 규칙을 사용합니다.

1. 규칙 1: ".C" 요소(가정된 상위 컨테이너) 이 규칙은 이 기준을 충족하는 첫 번째 "A" 요소에 원하는 스타일을 적용합니다.
2. 규칙 2: 규칙 1에서 선택한 첫 번째 요소를 따르는 모든 ".A" 요소를 대상으로 합니다. 이 규칙은 ".C"의 손자이기도 한 대상 "A" 요소의 모든 형제를 선택하기 위해 "~"를 사용합니다. 규칙 1에 의해 적용된 스타일에 필요한 모든 조정은 여기에서 재정의될 수 있습니다.

브라우저 호환성

~ 선택기는 CSS3의 일부이며, IE7 이상을 포함한 대부분의 주요 브라우저.

시각화 스타일 애플리케이션

규칙이 어떻게 적용되는지 설명하면서 다음 HTML 구조를 고려해 보겠습니다.

<div class="C">
    <div class="B">
        <div class="E">Content</div> <!-- [1] -->
        <div class="F">Content</div> <!-- [1] -->
        <div class="A">Content</div> <!-- [2] -->
        <div class="A">Content</div> <!-- [3] -->
    </div>
    <div class="D">
        <div class="A">Content</div> <!-- [2] -->
        <div class="E">Content</div> <!-- [1] -->
        <div class="F">Content</div> <!-- [1] -->
        <div class="A">Content</div> <!-- [3] -->
    </div>
</div>

규칙 1: 요소 [2]가 첫 번째 "A" 요소이므로 스타일을 요소에 적용합니다. 각각의 ".B" 컨테이너입니다.

규칙 2: 요소 [3]에 스타일을 적용합니다. 이전에 선택한 요소([2]) 뒤에 오는 "A" 요소.

위 내용은 CSS의 컨테이너 내에서 클래스 요소의 첫 번째 발생을 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!