다양한 하위 구조가 있는 특정 요소에 CSS 스타일을 적용하는 방법은 무엇입니까?

:nth-child를 사용하여 여러 상위에 걸친 스타일 지정

문제:

CSS 선택기가 여러 상위에 걸쳐 특정 요소에 영향을 미치도록 보장 다양한 하위 요소 구조를 가진 부모는 어려울 수 있습니다. 다음 예를 고려하십시오.

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

목표는 "1" 및 "3" 목록 항목에 특정 스타일을 적용하는 것입니다. 그러나 :nth-child(1) 및 :nth-child(3) 선택기를 사용하면 각 ul 요소 내의 첫 번째 및 세 번째 목록 항목의 스타일이 지정됩니다.

해결책:

안타깝게도 , CSS 선택자만으로는 부모-자식 구조의 이러한 변형을 처리할 수 없습니다. :nth-child() 선택기와 형제 조합자는 동일한 상위 내의 요소 선택으로 제한됩니다.

대체 접근 방식:

• JavaScript: 다음과 같은 라이브러리 jQuery를 사용하면 DOM 내의 인덱스나 위치를 기반으로 특정 요소를 타겟팅할 수 있습니다.
• 명시적 표시: 원하는 요소(이 경우 1개와 3개)에 클래스나 ID를 추가하면 다음이 가능합니다. CSS 선택기를 사용하여 정확한 타겟팅을 위해.

예를 들어 .foo 요소 내의 첫 번째 및 세 번째 목록 항목에 "selected" 클래스를 추가하는 경우:

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

CSS:

<code class="css">.foo li.selected {
    color: red;
}</code>

위 내용은 다양한 하위 구조가 있는 특정 요소에 CSS 스타일을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!