동일한 유형의 첫 번째 요소 스타일을 선택하려면 :first-of-type 의사 클래스 선택기를 사용하세요.

CSS의 최초 유형 의사 클래스 선택기를 사용하면 동일한 유형의 첫 번째 요소를 선택하고 스타일을 지정할 수 있습니다. 이 선택기는 p, div,span 등과 같은 여러 태그 요소에 사용할 수 있습니다.

다음은 구체적인 예제 코드입니다.

HTML 코드:

<div class="container">
  <h1 id="标题">标题1</h1>
  <p>第一段文字</p>
  <p>第二段文字</p>
  <h2 id="标题">标题2</h2>
  <p>第三段文字</p>
  <p>第四段文字</p>
</div>

CSS 코드:

p:first-of-type {
  font-weight: bold;
}

위 코드에서 첫 번째 p 태그 요소를 선택하고 굵게 설정했습니다. 결과가 브라우저에 표시되고 텍스트의 첫 번째 단락이 굵게 설정됩니다.

마찬가지로 첫 번째 유형 선택기를 사용하여 다른 태그 요소 중 첫 번째 요소를 선택할 수도 있습니다. 예:

h1:first-of-type {
  font-size: 24px;
}

여기에서는 첫 번째 h1 태그 요소를 선택하고 글꼴 크기를 24픽셀로 설정합니다.

첫번째 유형 선택기를 사용하면 동일한 유형의 첫 번째 요소만 선택할 수 있다는 점에 유의하세요. 다양한 유형의 요소 중 첫 번째 요소를 선택하려면 :first-child를 사용할 수 있습니다.

간단히 말하면, 최초 유형의 의사 클래스 선택기를 사용하면 동일한 유형의 첫 번째 요소에 대해 특정 스타일을 매우 편리하게 설정할 수 있습니다.

위 내용은 동일한 유형의 첫 번째 요소 스타일을 선택하려면 :first-of-type 의사 클래스 선택기를 사용하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!