CSS를 사용하여 컨테이너 내 클래스의 첫 번째 요소를 선택하는 방법은 무엇입니까?

주어진 클래스의 첫 번째 요소를 선택하는 CSS 선택기

웹 개발에서 웹 페이지의 특정 요소를 선택하는 것은 스타일과 기능에 매우 중요합니다. 일반적인 작업 중 하나는 더 넓은 계층 구조 내에서 특정 클래스가 있는 요소의 첫 번째 항목을 선택하는 것입니다.

id 또는 클래스가 '인 요소 내에서 클래스가 'A'인 첫 번째 요소를 선택해야 하는 시나리오를 생각해 보세요. 비'. '>'의 조합은 '첫 번째 하위' 선택기는 경우에 따라 작동할 수 있지만 'B' 요소 계층 구조 내에서 'A' 요소의 위치가 달라지면 실패합니다.

CSS3 솔루션: :first-of-type

CSS3은 :first-of-type 의사 클래스를 통해 솔루션을 제공합니다. 이를 통해 형제와 관련하여 지정된 유형의 첫 번째 요소를 선택할 수 있습니다. 그러나 CSS3에는 :first-of-class 의사 클래스가 포함되어 있지 않습니다.

일반 형제 결합자(~)를 사용하는 해결 방법

해결 방법으로 일반 형제 결합자( ~) 원하는 결과를 얻기 위해 CSS 재정의와 함께 사용됩니다. ~ 선택자는 왼쪽 선택기로 선택한 요소의 형제 요소와 일치하지만 직계 하위 요소는 일치하지 않습니다.

다음 규칙을 고려하세요.

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

이 규칙은 모든 요소를 ​​선택합니다. 'C' 클래스 요소의 손자 클래스 'A' 요소입니다. '.C'가 스타일을 지정하려는 모든 'A' 요소의 공통 조상이라고 가정합니다.

다음으로 재정의 규칙을 추가합니다.

.C > * > .A ~ .A {
    /* Style only the .A elements following the first .A child of each element that's a child of .C */
}

이 규칙은 ~를 사용합니다. 동일한 상위 요소를 가진 이전 'A' 요소 뒤에 오는 'A' 요소만 대상으로 지정하는 선택기입니다. 이는 첫 번째 규칙에 의해 적용된 스타일을 효과적으로 재정의합니다.

예:

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

<div>

위 CSS 규칙은 다음과 같이 스타일을 적용합니다.

• 요소 [1]에는 'A' 클래스가 없으며 클래스도 없습니다. 영향을 받습니다.
• 요소 [2]는 해당 상위 요소 내의 첫 번째 'A' 요소이며 첫 번째 규칙에 정의된 스타일을 받습니다.
• 요소 [3]은 첫 번째 'A' 요소가 아닙니다. A' 요소는 첫 번째 규칙을 재정의하는 재정의 규칙에 정의된 스타일을 받습니다.

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