CSS를 사용하여 짝수 및 홀수 목록 항목의 스타일을 적절하게 지정하려면 어떻게 해야 합니까?

CSS를 사용하여 짝수 및 홀수 요소 스타일 지정

CSS 의사 클래스는 위치나 상태를 기반으로 HTML 요소를 선택하고 스타일을 지정하는 강력한 도구입니다. 일반적인 사용 사례 중 하나는 목록 내 요소의 모양을 바꾸는 것입니다.

처음에는 다음 코드가 교대되는 색상 목록을 만드는 간단한 방법처럼 보일 수 있습니다.

li { color: blue }
li:odd { color:green }
li:even { color:red }

그러나 그러면 모든 목록 항목이 파란색으로 표시됩니다. 스타일 선언이 요소와 그 의사 클래스 모두에 적용될 때 후자가 항상 우선하기 때문입니다. 이 경우 li { color: blue }는 li:odd { color:green } 및 li:even { color:red }를 재정의합니다.

색상을 올바르게 교체하려면 nth-child()를 사용해야 합니다. 의사 클래스:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

n번째 하위 의사 클래스는 상위 컨테이너 내의 위치에 따라 요소를 선택하므로 짝수 요소와 홀수 요소를 타겟팅할 수 있습니다.

실시간 미리보기는 다음과 같습니다.

[코드 조각]

위 내용은 CSS를 사용하여 짝수 및 홀수 목록 항목의 스타일을 적절하게 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!