일치하지 않는 요소를 건너뛸 때 :nth-child를 사용하여 요소 색상을 대체하는 방법은 무엇입니까?

:nth-child(even/odd) 선택기(클래스 포함)

CSS에서 :nth-child(n) 선택기는 요소를 선택합니다. 그 사람은 부모의 n번째 자녀입니다. n이 홀수이면 n번째 자식(홀수) 선택자는 홀수 요소를 선택하고, n이 짝수이면 n번째 자식(짝수) 선택자는 짝수 요소를 선택합니다.

다음 HTML 마크업을 고려하세요. , "parent" 클래스가 있는 항목을 나열하기 위해 :nth-child 선택자를 적용하려고 합니다.

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

다음 CSS를 위의 HTML에 적용합니다:

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

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

예기치 않게, .parent가 아닌 첫 번째 요소 이후 요소의 색상이 재설정됩니다. 이는 :nth-child 선택자가 "parent" 클래스가 있는 요소뿐만 아니라 목록의 모든 요소에 적용되기 때문입니다.

원하는 동작을 달성하려면 일반 형제 결합자(~)를 사용해야 합니다. , DOM 트리에서 다른 요소 앞에 있는 요소를 선택합니다. 이것을 :nth-child 선택기와 결합하면 .parent가 아닌 요소가 나타날 때마다 ".parent" 요소의 색상을 교체할 수 있습니다.

.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" 요소의 수입니다. 그러나 :nth-child 선택기가 미리 볼 수 있는 .parent가 아닌 요소의 수는 제한되어 있으므로 이 기술은 대체 클래스가 많은 매우 긴 목록에는 실용적이지 않을 수 있습니다.

위 내용은 일치하지 않는 요소를 건너뛸 때 :nth-child를 사용하여 요소 색상을 대체하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!