동일한 유형의 요소 내 특정 위치에서 스타일을 선택하려면 :nth-of-type 의사 클래스 선택기를 사용하세요.

동일한 유형의 요소에서 특정 위치의 스타일을 선택하려면 :n번째 유형 의사 클래스 선택기를 사용하세요.

CSS에서는 동일한 유형의 요소에서 특정 위치에 대한 스타일을 설정해야 하는 경우가 많습니다. , 예를 들어 목록의 모든 세 번째 요소에는 특별한 스타일이 필요하며, 이 경우 :n번째 유형 의사 클래스 선택기를 이 목적으로 사용할 수 있습니다.

:n번째 유형 의사 클래스 선택기는 유형과 위치에 따라 대상 요소를 선택할 수 있습니다. 구문은 다음과 같습니다.

:nth-of-type(n)

여기서 n은 위치를 나타내는 매개변수로 특정 숫자 또는 키워드일 수 있습니다. 예를 들어 홀수는 홀수 위치를 나타내고 짝수는 위치를 나타냅니다. 균등한 위치.

다음은 구체적인 예입니다:

HTML 코드:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
  <li>第五个元素</li>
  <li>第六个元素</li>
  <li>第七个元素</li>
  <li>第八个元素</li>
</ul>

CSS 코드:

li:nth-of-type(3n) {
  color: red;
}

위 코드에서는 :nth-of-type(3n) 선택기를 사용하여 목록의 모든 세 번째 요소를 선택합니다. 색상을 빨간색으로 설정하세요. 이 선택자의 규칙에 따라 이 스타일은 세 번째, 여섯 번째, 아홉 번째 요소에 적용됩니다.

홀수 위치에 있는 요소를 선택하려면 :nth-of-type(odd) 선택기를 사용할 수 있습니다. 샘플 코드는 다음과 같습니다.

CSS 코드:

li:nth-of-type(odd) {
  background-color: lightgray;
}

이 방법으로 배경색은 목록에서 홀수 위치에 있는 요소는 밝은 회색으로 설정됩니다.

목록에 :n번째 유형 선택기를 적용하는 것 외에도 단락, 제목 등과 같은 다른 유형의 요소에도 사용할 수 있습니다.

간단히 말하면 :nth-of-type 의사 클래스 선택기를 사용하면 동일한 유형의 요소에서 특정 위치를 스타일링하려는 목적을 달성할 수 있습니다. 특정 매개변수를 설정하여 원하는 위치를 선택하고 특정 스타일을 적용할 수 있습니다. 이는 다수의 유사한 요소의 스타일을 처리할 때 매우 유용하여 개발 효율성을 향상시킵니다.

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