CSS 및 JavaScript를 사용하여 첫 번째 특정 클래스의 요소를 선택하고 스타일링하는 방법은 무엇입니까?

CSS 및 JavaScript를 정확하게 조작 : 첫 번째 특정 클래스 요소 스타일

웹 개발에서는 종종 특정 범주의 첫 번째 요소를 스타일링해야합니다. 예를 들어, 페이지에는 클래스 = "빨간색"이있는 여러 요소가 있지만 첫 번째 요소 만 빨간색으로 표시 될 것으로 예상됩니다. 이 기사는 CSS 및 JavaScript를 사용하여이를 달성하는 방법을 보여줍니다.

HTML 구조 예 :

다음 HTML 코드에는 여러 클래스 = "빨간색"요소가 포함됩니다.

<div id="test">
  <span>나는 스팬입니다</span>
  <h1 id="저는-H-입니다-단지-내-스타일을-빨간색으로-설정했습니다">저는 H1입니다. 단지 내 스타일을 빨간색으로 설정했습니다</h1>
  <h1 id="나는-H-입니다">나는 H1입니다</h1>
  <h1 id="나는-H-입니다">나는 H1입니다</h1>
  <h1 id="나는-H-입니다">나는 H1입니다</h1>
</div>

방법 1 : JavaScript 구현

JavaScript의 document.querySelector() 메소드는 첫 번째 일치 요소를 쉽게 선택할 수 있습니다. 다음 코드는 첫 번째 클래스 = "빨간색"요소의 색상을 빨간색으로 설정합니다.

 document.querySelector ( '. red'). style.color = 'red';

방법 2 : CSS 구현

CSS의 :nth-child() 의사 클래스 선택기는 요소의 순서에 따라 선택 될 수 있습니다. of 키워드와 결합하여 특정 클래스의 첫 번째 요소를 정확하게 선택할 수 있습니다.

 .red : nth-Child (.red) {
  색상 : 빨간색;
}

마지막 클래스 = "빨간색"요소를 스타일링하려면 다음을 사용할 수 있습니다 :nth-last-child() 의사 클래스 :

 .red : n-last-Child (.red) {
  색상 : 파란색;
}

호환성 설명 : :nth-child(n of selector) 및 :nth-last-child(n of selector) 브라우저 호환성에 문제가있을 수 있습니다. 일부 이전 브라우저에서는이 방법이 제대로 작동하지 않을 수 있습니다. 따라서 선택할 방법은 프로젝트의 브라우저 호환성 요구 사항에 따라 다릅니다. 호환성이 중요하다면 JavaScript 방법이 일반적으로 더 신뢰할 수 있습니다.

요약 : JavaScript와 CSS는 특정 클래스의 첫 번째 요소의 스타일 설정을 구현할 수 있습니다. 개발자는 실제 프로젝트 요구 사항과 브라우저 호환성 고려 사항을 기반으로 가장 적절한 방법을 선택해야합니다.

위 내용은 CSS 및 JavaScript를 사용하여 첫 번째 특정 클래스의 요소를 선택하고 스타일링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!