N%3 모드에서 교대 요소 색상의 효과를 달성하기 위해 순수한 CSS를 사용하는 방법은 무엇입니까?

순수한 CSS는 요소 색상의 색상 교대를 구현합니다

이 기사는 순수한 CSS를 사용하여 요소 인덱스를 기반으로 N%3 모드에서 교대 요소 색상의 효과를 달성하는 방법을 소개합니다. 이 기술은 시각적으로 매력적인 목록이나 그리드 레이아웃을 만들 때 매우 유용합니다.

다음과 같은 HTML 구조가 있다고 가정합니다.

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

CSS 변수 정의 :

 .Container {
  -Color1 : #fff;
  -Color2 : #da3838;
  -Color3 : RGB (49, 196, 23);
  p {
      /* 기타 스타일*/
  }
}

우리의 목표는 각각을 만드는 것입니다<p> 요소의 배경색은 나머지 <code>n%3 에 따라 순환 적으로 변합니다.

• 요소 1 : --color1
• 요소 2 : --color2
• 요소 3 : --color3
• 요소 4 : --color1
• 등...

CSS의 nth-child 의사 급이이를 달성 할 수 있습니다. nth-child 의 구문을 영리하게 적용함으로써 특정 요소를 선택하고 다른 스타일을 적용 할 수 있습니다.

해결책:

 .Container P : Nth-Child (3N 1) {
  배경색 : var (-color1);
}

.Container P : Nth-Child (3N 2) {
  배경색 : var (-color2);
}

.Container P : Nth-Child (3N 3) {
  배경색 : var (-color3);
}

이 CSS 코드는 nth-child(3n x) 선택기를 사용합니다.

• 3n 1 모든 색인을 3으로 나눈 왼쪽 1 (1, 4, 7, ...)로 나눕니다.
• 3n 2 2 2 (2, 5, 8, ...) 인 3 개의 요소로 나눈 모든 인덱스를 선택하십시오.
• 3n 3 모든 인덱스를 선택하여 나머지 0 (3, 6, 9, ...) 인 3 개의 요소로 나눈 값을 선택하십시오.

위의 CSS 코드를 통해 성공적으로 구현했습니다<p> 요소 배경색의 원형 교대 효과는 <code>n%3 모드 요구 사항을 충족합니다. 이 방법은 간단하고 효율적이며 순수한 CSS를 사용하여 완전히 구현되어 JavaScript의 추가 오버 헤드를 피합니다.

위 내용은 N%3 모드에서 교대 요소 색상의 효과를 달성하기 위해 순수한 CSS를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!