내 CSS :odd 및 :even 선택기가 예상대로 작동하지 않는 이유는 무엇입니까?

짝수 및 홀수 요소 스타일 지정

CSS 의사 클래스 :odd 및 :even을 사용하면 목록에 있는 요소의 홀수 및 짝수 인스턴스에 스타일을 적용할 수 있습니다. 그러나 이러한 의사 클래스를 기본 스타일 규칙과 함께 사용하면 문제가 발생하여 예상치 못한 결과가 발생합니다.

예를 들어 다음 CSS 및 HTML 코드를 고려해보세요.

li { color: blue }
li:odd { color:green }
li:even { color:red }

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

교체 색상 목록이 생성될 것으로 예상할 수도 있지만 대신 모든 목록 항목은 blue.

해결책

이 문제를 해결하려면 :odd 및 :even 대신 n번째 하위 의사 클래스를 사용할 수 있습니다. nth-child의 구문은 다음과 같습니다.

li:nth-child(n) {...}

여기서 n은 상위 요소 내의 요소 위치를 나타냅니다.

홀수 및 짝수 목록 항목의 스타일을 지정하려면 다음을 사용할 수 있습니다. CSS:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

이렇게 하면 블랙리스트 항목 목록이 생성되고 다른 모든 항목은 회색과 회색으로 번갈아 표시됩니다. (#777) 및 파란색.

위 내용은 내 CSS :odd 및 :even 선택기가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!