다양한 구조에서 특정 클래스 요소의 첫 번째 발생을 선택하는 방법은 무엇입니까?

특정 클래스 요소의 첫 번째 발생 선택

특정 클래스 요소의 첫 번째 발생을 선택하는 것은 구조와 요소가 다음과 같은 경우 어려울 수 있습니다. 상위 요소 내의 개수는 다양합니다. 이 경우 ID 또는 클래스가 'B'인 요소 내에서 클래스가 'A'인 첫 번째 요소를 선택하려고 시도하는 동안 문제가 발생합니다.

CSS3으로 문제 극복

CSS3은 형제 중에서 특정 유형의 첫 번째 요소를 대상으로 하는 :first-of-type 의사 클래스를 제공합니다. 그러나 이에 상응하는 클래스 최초 의사 클래스는 없습니다.

해결 방법

해결 방법으로 일반 형제 결합자(~ ) 및 .C 내의 모든 .A 요소에 적용된 원래 스타일을 "실행 취소"하는 재정의 규칙을 적용합니다. 요소.

CSS 코드

다음 CSS 코드는 솔루션을 제공합니다.

.C > * > .A {
    /* Style every .A that's a grandchild of .C */
}

.C > * > .A ~ .A {
    /* Override styles only for .A elements following the first .A child */
}

이 코드는 다음과 같은 모든 .A 요소에 스타일을 적용합니다. .C의 손자입니다. 또한 .C 아래 각 요소의 첫 번째 .A 하위 뒤에 오는 후속 .A 요소의 스타일을 재정의합니다.

예시 그림

다음 HTML 구조를 고려하세요. :

<div class="C">
    <div class="B">
        <div class="A">Content</div>
        <div class="A">Content</div>
    </div>
</div>

이에 시나리오:

• 첫 번째 .A 요소는 첫 번째 규칙에 의해 적용된 스타일을 받습니다.
• 첫 번째 요소에 이어 두 번째 .A 요소는 다음에 의해 적용된 재정의된 스타일을 받습니다. 두 번째 규칙.

브라우저 호환성

~ 선택자는 IE7 이상에서 인식되므로 이 솔루션이 널리 지원된다는 의미입니다. 실패하는 유일한 주요 브라우저는 IE6입니다.

이 해결 방법을 구현하면 개발자는 상위 요소 내의 구조와 요소 수가 다양한 경우에도 특정 클래스 요소가 처음 나타나는 항목을 선택적으로 대상으로 지정하고 스타일을 지정할 수 있습니다.

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