CSS의 여러 부모에 걸쳐 특정 n번째 자식의 스타일을 지정하는 방법

여러 부모에 걸쳐 특정 n번째 자식 스타일 지정

n번째 자식 선택자를 사용하여 중첩된 요소의 스타일을 지정할 때 선택자가 단일 상위 컨텍스트 내에서 작동합니다. 이로 인해 여러 상위 요소에 걸쳐 특정 하위 요소를 타겟팅할 때 문제가 발생할 수 있습니다.

문제:

다음 마크업을 고려하세요.

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

목표는 .foo 내의 첫 번째 및 세 번째 li 요소의 스타일을 지정하는 것입니다. 다음 CSS 사용:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

nth-child가 각 ul의 첫 번째 및 세 번째 하위 항목을 선택하므로 이 접근 방식은 작동하지 않습니다.

해결책:

CSS만 사용하면 여러 부모의 n번째 자녀를 타겟팅할 수 없습니다. 그러나 대체 솔루션도 있습니다.

• JavaScript: jQuery와 같은 라이브러리를 사용하면 DOM 요소를 쉽게 조작하고 $('.foo li:eq( 0), .foo li:eq(2)').
• 명시적 마크업: 다음과 같이 명시적으로 첫 번째 및 세 번째 li 요소에 클래스나 ID를 추가합니다.

<div class="foo">
    <ul>
        <li class="first">one</li>
        <li>two</li>
    </ul>
    <ul>
        <li class="third">three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

그런 다음 새로 추가된 클래스를 사용하여 스타일을 지정하세요.

.foo li.first,
.foo li.third
{
    color: red;
}

위 내용은 CSS의 여러 부모에 걸쳐 특정 n번째 자식의 스타일을 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!