CSS 의사 클래스가 짝수 및 홀수 목록 항목의 스타일을 적절하게 지정할 수 있습니까?

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

CSS 의사 클래스를 활용하여 짝수 목록과 홀수 목록의 스타일을 구별할 수 있습니까? 아이템?

예상되는 것 결과:

다음 코드 조각에서 볼 수 있듯이 교대 색상이 포함된 목록:

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

실제 결과:

색상을 번갈아 가며 사용하는 대신 모든 목록 항목이 다음과 같이 표시됩니다. blue.

해결책:

짝수 및 홀수 요소의 스타일을 성공적으로 지정하려면 아래에 설명된 대로 n번째 하위 의사 클래스를 사용하는 것이 좋습니다.

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

이 솔루션은 다음 코드에 표시된 것처럼 대체 색상 요구 사항을 효과적으로 해결합니다. 일부 내용:

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

위 내용은 CSS 의사 클래스가 짝수 및 홀수 목록 항목의 스타일을 적절하게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!