CSS 또는 JavaScript를 사용하여 HTML에서 요소 유형의 첫 번째 인스턴스 스타일을 지정하는 방법은 무엇입니까?

전체 문서에서 특정 요소 유형의 첫 번째 인스턴스 식별

질문:

CSS를 어떻게 활용할 수 있습니까? 또는 문서 내 위치에 관계없이 전체 HTML 문서에서 특정 요소 유형의 초기 발생을 대상으로 하고 스타일을 지정하는 JavaScript 구조?

정답:

CSS 기반 솔루션

안타깝게도 CSS만으로는 첫 번째 구조와 일치하는 기능을 제공하지 않습니다. 전체 문서에서 요소 유형이 발생합니다. CSS 사양에 따라 :first-of-type 의사 클래스는 상위 요소 내 해당 유형의 첫 번째 형제에만 적용됩니다.

JavaScript 기반 솔루션

1. :first-of-type 에뮬레이션

JavaScript를 사용하면 사용자 정의 클래스인 "first-of-type"을 도입하고 querySelector() 메서드를 활용하여 첫 번째 일치 항목을 검색함으로써 이 기능을 구현할 수 있습니다. 원하는 유형의 요소. 그런 다음 이 사용자 정의 클래스를 검색된 요소에 할당합니다:

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

2. 사용자 정의 일치 기능

특정 요소 유형이 처음 나타나는 것을 식별하고 스타일을 지정하는 사용자 정의 JavaScript 함수를 개발할 수도 있습니다.

function nthIndexOfType(element, index) {
  var siblings = element.parentElement.children;
  var count = 1;
  for (var i = 0; i < siblings.length; i++) {
    if (siblings[i].tagName === element.tagName) {
      if (count === index) {
        return siblings[i];
      }
      count++;
    }
  }
  return null;
}

nthIndexOfType(document.querySelector('p'), 1).style.backgroundColor = 'pink';

이 함수는 요소라는 두 가지 매개변수를 허용합니다. 검색하려는 항목과 대상으로 삼고 싶은 항목의 인덱스입니다. 모든 형제 요소를 반복하고 원하는 스타일을 적용하여 지정된 유형의 첫 번째 요소를 반환합니다.

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