클래스에 :nth-child(even/odd)를 사용할 때 대체 색상이 재설정되는 이유는 무엇입니까?

:클래스 문제가 있는 n번째-child(짝수/홀수) 선택기

"부모"가 포함된 목록 항목에 대체 색상을 적용하려고 합니다. " 수업. 그러나 색상을 재설정하는 데 문제가 발생합니다. 이 문제를 해결하려면 다음을 고려하세요.

해결책:

CSS 규칙은 위에서 아래로 적용되므로 :nth-child(짝수/홀수) 선택기는 잠재적으로 이전 색상 설정을 무시합니다. 이 문제를 해결하려면 일반 형제 조합자(~)를 사용하여 "부모" 요소가 아닌 요소 뒤의 색상을 전환합니다.

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* Alternate colors after non-.parent elements */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

설명:

• 처음 두 규칙은 "상위" 요소에 대해 대체 색상을 설정합니다.
• 후속 규칙은 ~ 결합자를 사용하여 "상위" 요소가 아닌 요소 뒤의 색상을 전환합니다.
• 각 규칙 세트는 색상을 다음으로 대체합니다. 특이성이 높아져 원하는 동작이 보장됩니다.

제한 사항:

이 방법을 사용하면 "부모"가 아닌 제한된 수의 색상을 번갈아 얻을 수 있습니다. 이 접근 방식을 얼마나 확장할 수 있는지에는 한계가 있습니다.

위 내용은 클래스에 :nth-child(even/odd)를 사용할 때 대체 색상이 재설정되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!