n번째 하위 선택기를 사용하여 '상위' 클래스가 있는 목록 항목에 대체 색상을 적용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

n번째 하위 선택기를 사용하여 '상위' 클래스가 있는 목록 항목에 대체 색상을 적용하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-09 04:21:02

원래의

979명이 탐색했습니다.

How to Apply Alternating Colors to List Items with the

클래스가 있는 N번째 하위 선택기: 색상 재설정 극복

"상위" 클래스가 있는 목록 항목에 대체 색상을 적용하려는 시도 , 일치하지 않는 특정 요소 이후 색상이 재설정되는 문제가 발생할 수 있습니다. 이 문제는 :nth-child 선택기의 제한으로 인해 발생합니다.

그러나 일반 형제 조합자(~)를 사용하면 해결 방법이 있습니다. 일치하지 않는 요소 뒤에 오는 요소에 대한 규칙을 정의하면 일치하는 후속 요소의 색상을 전환할 수 있습니다. 방법은 다음과 같습니다.

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

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

/* Toggle colors again after second non-parent element */
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;
}

로그인 후 복사

이 접근 방식을 사용하면 각 :not(.parent) 요소가 "재설정" 지점 역할을 하여 последуушие соответствуячие элементы의 색상을 전환합니다. 확장 가능한 범위에는 제한이 있지만 순수 CSS를 사용하여 색상을 바꾸는 것과 가장 가까운 근사치입니다.

위 내용은 n번째 하위 선택기를 사용하여 '상위' 클래스가 있는 목록 항목에 대체 색상을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!