CSS 의사 클래스가 짝수 목록 항목과 홀수 목록 항목 스타일을 지정할 수 있나요?

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

질문:

CSS를 사용할 수 있나요? 의사 클래스를 사용하여 목록 내에서 짝수 및 홀수 요소를 선택하고 스타일을 지정할 수 있습니까? 색상이 번갈아 나타나는 목록이 의도된 결과이지만 파란색 항목만 포함된 목록이 생성됩니다.

예:

다음 코드는 목록을 생성할 것으로 예상됩니다. 녹색과 빨간색 항목이 번갈아 표시되지만 대신 모든 항목은 blue.

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

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

답변:

짝수 및 홀수 요소의 스타일을 올바르게 지정하려면 다음 대신 :nth-child 의사 클래스를 사용해야 합니다. 이상하고 :even:

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>

데모: [JSfiddle](http://jsfiddle.net/thirtydot/K3TuN/1323/)

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