CSS3 `:first-of-type` 선택기는 클래스 이름과 어떻게 작동하나요?

클래스 이름과 함께 CSS3 선택기 :first-of-type 사용

CSS3 선택기 :first-of가 일반적으로 오해하는 경우가 있습니다. -type을 클래스 이름과 함께 사용하여 특정 클래스의 첫 번째 요소를 선택할 수 있습니다. 그러나 그렇지 않습니다.

:first-of-type 의사 클래스는 형제 중에서 해당 유형의 첫 번째 요소를 대상으로 합니다. 따라서 :first-of-type과 함께 클래스 선택기를 사용하면 해당 유형의 첫 번째 요소이기도 한 해당 클래스의 첫 번째 요소가 선택됩니다.

설명:

p:first-of-type { color: blue; }

이 규칙 상위 요소의 첫 번째 문단을 파란색으로 바꿉니다.

p.myclass1:first-of-type { color: red; }

이 규칙은 "myclass1" 클래스가 있는 첫 번째 문단을 바꿉니다. red.

그러나 "myclass1" 클래스가 포함된 단락이 여러 개 있는 경우 지정된 클래스가 있는 해당 유형의 첫 번째 단락을 대상으로 하기 때문에 첫 번째 단락만 이 규칙의 영향을 받습니다.

유형에 관계없이 클래스의 첫 번째 항목을 선택하기 위해 사용할 수 있는 직접 CSS3 선택기가 없습니다. 대신 여러 선택기와 계단식을 포함하는 해결 방법을 사용할 수 있습니다.

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default color */; }

이 솔루션은 "myclass1" 클래스를 사용하여 요소의 초기 색상을 설정하여 작동합니다. 그런 다음 후속 규칙은 첫 번째 요소의 형제인 동일한 클래스를 가진 다른 요소의 색상을 재정의합니다.

기본적으로 :first-of-type은 해당 유형의 첫 번째 요소가 아닌 해당 유형의 첫 번째 요소를 대상으로 한다는 점을 기억하세요. 주어진 클래스의 첫 번째 요소는 CSS3 선택기에서 사용할 때 매우 중요합니다.

위 내용은 CSS3 `:first-of-type` 선택기는 클래스 이름과 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!