CSS의 홀수 목록 항목 스타일 지정: `li:odd`/`:even` 또는 `:nth-child()`?

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

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

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

대신 of:

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-로 대체 아이(짝수), 원하는 교대 색상 효과가 달성됩니다. 이는 :nth-child를 사용하면 목록 내 위치에 따라 요소를 선택할 수 있어 각 항목에 올바른 스타일이 적용되도록 할 수 있기 때문입니다.

위 내용은 CSS의 홀수 목록 항목 스타일 지정: `li:odd`/`:even` 또는 `:nth-child()`?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!