집 >웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 전체 문서에서 특정 요소 유형의 첫 번째 인스턴스를 선택하는 방법은 무엇입니까?

CSS를 사용하여 전체 문서에서 특정 요소 유형의 첫 번째 인스턴스를 선택하는 방법은 무엇입니까?

How to Select the First Instance of a Specific Element Type in an Entire Document Using CSS?

문서 어디에서나 특정 유형의 첫 번째 요소 일치

질문:

첫 번째 요소를 어떻게 지정할 수 있나요? 다음을 사용하여 전체 문서에서 특정 요소 유형의 인스턴스 CSS?

답변:

일반 CSS는 전체 문서에서 특정 유형의 첫 번째 요소 일치를 허용하지 않습니다. 이는 :first-of-type 의사 클래스가 문서 루트가 아닌 해당 상위 요소와 관련된 요소에만 적용되기 때문입니다.

지정된 선택기에서 첫 번째로 일치하는 요소를 검색하는 querySelector() 메서드를 사용하여 JavaScript로 :first-of-type의 기능을 대략적으로 구현할 수 있습니다. 예는 다음과 같습니다.

document.querySelector('p').className += ' first-of-type';

p {
  background: red;
}

p.first-of-type {
  background: pink;
}

이 코드는 "first-of-type" 클래스를 첫 번째

문서의 요소에 독립적으로 스타일을 지정할 수 있습니다.

<body>
  <section>
    <p>111</p>
    <p>222</p>
    <p>333</p>
  </section>
  <p>444</p>
  <p>555</p>
</body>

위 내용은 CSS를 사용하여 전체 문서에서 특정 요소 유형의 첫 번째 인스턴스를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：