CSS3의 `:first-of-type` 선택기를 클래스 이름과 함께 사용할 수 있나요?

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

CSS3 선택기:first를 활용하는 것이 가능한지 궁금할 수도 있습니다. -of-type을 클래스 이름과 함께 사용합니다. 그러나 이 선택자만으로는 충분하지 않을 수 있습니다.

설명

:first-of-type 의사 클래스는 해당 클래스 내에서 특정 유형의 첫 번째 요소를 대상으로 합니다. 형제. 클래스 선택기와 결합하면 지정된 클래스를 소유하고 형제 중에서 해당 유형의 첫 번째 요소인 요소를 필터링합니다.

안타깝게도 CSS에는 다음을 수행하는 :first-of-class 선택기가 없습니다. 특정 클래스의 요소가 처음으로 나타나는 경우에만 찾습니다.

해결 방법

이 제한 사항을 해결하려면 다음 기술을 사용할 수 있습니다.

.myclass1 {
  color: red;
}

.myclass1 ~ .myclass1 {
  color: /* default or inherited from parent div */;
}

설명

이 해결 방법은 일반 형제 결합자(~)를 사용하여 동일한 클래스를 가진 다른 요소가 앞에 오는 클래스 myclass1 이러한 후속 요소의 색상을 기본값으로 설정하거나 상위 div에서 상속함으로써 .myclass1의 첫 번째 발생을 제외한 모든 항목에 대해 빨간색을 효과적으로 억제합니다.

추가 리소스

이 해결 방법에 대한 자세한 설명과 시각적 그림은 여기에서 확인할 수 있습니다.

• [Mozilla 개발자 네트워크](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Adjacent_sibling_selectors)
• [CSS 트릭](https://css-tricks.com/almanac/ selectors/c/combinators/#:~:text=~ 결합자는 모두 선택합니다.= 30(클래스는 특이성))

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