사용 방법: 위치가 3n+1 조건을 충족하는 동일한 유형 요소의 CSS 스타일을 선택하는 n번째 유형(3n+1) 의사 클래스 선택기

사용 방법: n번째 유형(3n+1) 의사 클래스 선택기를 사용하여 위치가 3n+1 조건을 충족하는 동일한 유형 요소의 CSS 스타일을 선택합니다.

In CSS를 사용하면 특정 위치의 요소에 서로 다른 스타일을 적용해야 하는 경우가 많습니다. :nth-of-type(3n+1) 의사 클래스 선택자는 동일한 유형의 요소 중에서 3n+1 조건을 충족하는 위치를 선택하고 스타일을 적용하는 편리한 방법을 제공합니다.

:nth-of-type(3n+1) 선택기의 작동 원리는 3n+1의 위치를 ​​만족하는 동일한 유형의 요소를 선택하는 것입니다. 그 중 n은 정수를 나타내고, 3n+1은 1, 4, 7 등과 같이 조건을 만족하는 위치를 나타낸다.

다음으로 특정 코드 예제를 사용하여 :nth-of-type(3n+1) 선택기를 사용하는 방법을 설명하겠습니다.

먼저 동일한 유형의 HTML 요소 세트가 필요합니다. 순서가 없는 목록을 예로 들어 보겠습니다.

<ul>
  <li>第1个元素</li>
  <li>第2个元素</li>
  <li>第3个元素</li>
  <li>第4个元素</li>
  <li>第5个元素</li>
  <li>第6个元素</li>
  <li>第7个元素</li>
  <li>第8个元素</li>
  <li>第9个元素</li>
  <li>第10个元素</li>
</ul>

다음으로 3n+1 조건을 충족하는 요소(예: 위치 1, 4, 7 등)에 스타일을 적용하려고 합니다. 이 작업을 수행하려면 :nth-of-type(3n+1) 선택기를 사용할 수 있습니다. 예를 들어, 이러한 요소의 배경색은 빨간색으로, 글꼴 색상은 흰색으로 설정하려고 합니다. 코드는 다음과 같습니다.

li:nth-of-type(3n+1) {
  background-color: red;
  color: white;
}

위 코드를 CSS 파일에 추가하고 CSS 파일을 HTML 파일과 연결합니다. 브라우저를 열고 페이지를 보면 3n+1 조건을 충족하는 위치의 요소에 해당 스타일이 적용된 것을 볼 수 있습니다.

위의 코드 예제와 설명을 통해 :nth-of-type(3n+1) 의사 클래스 선택기를 사용하여 위치가 3n+1 조건을 충족하는 동일한 유형의 요소를 선택하는 방법을 이해하셨기를 바랍니다. CSS 스타일을 적용해 보세요. 이 기술은 실제 프로젝트에서 자주 사용되는데 도움이 되길 바랍니다.

위 내용은 사용 방법: 위치가 3n+1 조건을 충족하는 동일한 유형 요소의 CSS 스타일을 선택하는 n번째 유형(3n+1) 의사 클래스 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!