짝수 및 홀수 목록 요소 스타일 지정: 의사 클래스와 n번째-자식

CSS 의사 클래스를 사용하여 목록 항목에 대해 대체 색상을 얻으려고 할 때 다음을 수행할 수 있습니다. 문제가 발생합니다. 이 목적으로 li:odd 및 li:even을 사용하는 것이 논리적으로 보일 수 있지만 동작을 예측할 수 없습니다.

목록 항목의 짝수 인스턴스와 홀수 인스턴스의 스타일을 효과적으로 지정하려면 다음 접근 방식을 사용하는 것이 좋습니다.

대신:

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

사용:

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

:odd 및 :even을 :nth-child(odd) 및 :nth-child(even)로 대체하면 원하는 교대 색상 효과를 얻을 수 있습니다. 이는 :nth-child를 사용하면 목록 내 위치에 따라 요소를 선택할 수 있어 각 항목에 올바른 스타일이 적용되도록 할 수 있기 때문입니다.