부모가 아닌 요소가 존재할 때 :nth-child(짝수/홀수) 선택기로 색상을 전환하는 방법은 무엇입니까?

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

n번째-자식(홀수/짝수) 선택자를 구현할 때 클래스 기반 목록에서는 색상 재설정 문제가 발생하는 것이 일반적입니다. 제공된 예에서 요소는 텍스트의 색상을 상속하도록 되어 있었지만 대신 재설정되었습니다.

이 문제는 n번째-자식(짝수/홀수) 선택기가 기본적으로 다음 요소에 관계없이 모든 하위 요소를 대상으로 하기 때문에 발생합니다. 클래스 또는 기타 속성. 이 문제를 해결하기 위해 ~ 일반 형제 결합자를 사용할 수 있습니다.

이 개념에는 .parent가 아닌 요소가 발생한 후 후속 .parent 요소의 색상을 전환하는 것이 포함됩니다. 다음은 CSS에 대한 세부 내용입니다.

/* Initial even/odd coloring */
.parent:nth-child(odd) {
    background-color: green;
}

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

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

li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* Toggle colors after second non-.parent */
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가 아닌 요소가 있는 경우에도 색상 간 전환이 가능합니다. 그러나 이 접근 방식에는 제한이 있으며 제한된 수의 제외된 요소에만 사용해야 한다는 점에 유의하는 것이 중요합니다.

이 전략을 구현하면 :nth-child(홀수/짝수) 선택기를 효과적으로 적용할 수 있습니다. 클래스 기반 목록을 만들고 원하는 대체 색상 구성표를 달성하여 목록 항목이 텍스트 콘텐츠의 색상을 상속하도록 보장합니다.

위 내용은 부모가 아닌 요소가 존재할 때 :nth-child(짝수/홀수) 선택기로 색상을 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!