'.parent'가 아닌 요소가 중간에 있는 '.parent' 목록 항목의 배경색을 대체하는 방법은 무엇입니까?

클래스와 함께 :nth-child(even/odd) 선택기 사용:

교대 배경색을 목록 항목에 적용하려고 합니다. ".parent" 클래스. 그러나 현재 색상이 재설정되었습니다.

문제:
목록 내에 ".parent"가 아닌 요소가 존재하기 때문에 ".parent" 요소가 예상대로 작동하지 않습니다. .

해결책:
일반적으로 :nth-child 선택자만으로는 원하는 동작을 달성할 수 없습니다. 그러나 일반 형제 조합자(~)를 사용할 수 있습니다.

1. 홀수 ".parent" 요소를 모두 선택하고 "녹색" 색상을 적용합니다.
2. "가 아닌 각 요소에 대해. parent" 요소의 경우 ~.

CSS 코드:

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

/* After the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* After the second non-.parent, toggle again */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

를 사용하여 다음 ".parent" 요소의 색상을 전환합니다. 이 접근 방식은 색상을 번갈아 표시합니다. ".parent"가 아닌 "제외된" 요소의 제한된 수에 대해 원하는 교대 패턴을 달성합니다.

위 내용은 '.parent'가 아닌 요소가 중간에 있는 '.parent' 목록 항목의 배경색을 대체하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!