:first-of-type 선택기를 사용하여 특정 클래스의 첫 번째 요소를 선택할 수 있나요?

:first-of-type 선택기와 클래스 선택

CSS3의 :first-of-type 선택기는 첫 번째 유형을 선택하도록 설계되었습니다. 형제 요소 중 특정 유형(예: p, div 등)의 요소입니다. 그러나 클래스 이름과 함께 사용하려고 하면 일반적인 오해가 발생합니다.

질문:

:first-of-type을 활용하는 것이 가능합니까? 특정 클래스의 첫 번째 요소를 선택하는 선택기 이름이 무엇입니까?

답변:

안타깝게도 단일 선택기를 사용하여 이를 달성하는 것은 불가능합니다. :first-of-type 의사 클래스는 클래스 이름이 아닌 요소 유형에 대해 작동합니다. 클래스 선택기와 함께 사용한다는 것은 지정된 클래스가 있고 형제 그룹 내에서 해당 유형의 첫 번째인 요소를 선택하는 것을 의미합니다.

해결 방법:

있는 대로 아니요: CSS에서 제공하는 클래스 최초 선택기인 경우 해결 방법을 사용하여 첫 번째 발생을 대상으로 할 수 있습니다. class:

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

여기서 첫 번째 클래스 선언은 "myclass1" 클래스가 있는 모든 요소의 색상을 빨간색으로 설정합니다. 후속 선언은 동일한 클래스를 가진 다른 요소 바로 앞에 "myclass1" 클래스가 있는 모든 요소를 ​​대상으로 합니다. 후자의 선언은 클래스의 첫 번째 발생을 제외한 모든 색상을 기본값 또는 상속된 값으로 재설정합니다.

이 해결 방법에 대한 자세한 설명과 그림은 다음에서 확인할 수 있습니다. 기사:

• https://css-tricks.com/the-problem-with-first-child-selector/
• https://www.quirksmode.org/css /contents.html#첫째 형제

위 내용은 :first-of-type 선택기를 사용하여 특정 클래스의 첫 번째 요소를 선택할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!