CSS가 여러 상위 요소에 걸쳐 n번째 하위 요소를 타겟팅할 수 있나요?

CSS의 여러 부모에 걸쳐 n번째 자식 타겟팅: 해결되지 않은 수수께끼

CSS 영역에서 특정 자식 요소를 선택하는 기능 부모 내부는 오랫동안 웹 디자이너의 필수 요소였습니다. 그러나 여러 상위 요소에 걸쳐 n번째 하위 요소를 타겟팅하는 경우 경로가 복잡해집니다.

다음 시나리오를 고려해보세요. 각각 ul 세트를 포함하는 여러 ul 요소가 있는 div.foo 컨테이너가 있습니다. 리 아이템. div.foo 내 모든 ul의 첫 번째 및 세 번째 li 요소에 구체적으로 스타일을 적용하려고 합니다.

얼핏 보면 다음 CSS가 간단한 솔루션처럼 보일 수 있습니다.

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

그러나 이 접근 방식은 CSS의 :nth-child() 선택기의 본질적인 한계로 인해 부족합니다. 동일한 직계 상위 내의 하위 요소만 대상으로 지정할 수 있습니다. 따라서 위의 CSS는 각 ul의 첫 번째 하위 항목에만 스타일을 지정하여 다음과 같은 바람직하지 않은 결과를 초래합니다. http://jsfiddle.net/hTfVu/

원하는 결과를 얻으려면 CSS 선택자만으로는 충분하지 않습니다. jQuery와 같은 JavaScript 라이브러리는 편리한 솔루션을 제공합니다.

$('.foo li:eq(0), .foo li:eq(2)')

이 코드는 div.foo에 포함된 각 ul 내의 첫 번째 및 세 번째 li 요소를 선택합니다.

또는 명시적으로 클래스나 ID를 사용하여 첫 번째 및 세 번째 li 요소를 지정한 다음 그에 따라 CSS를 통해 대상을 지정합니다. 그러나 이 접근 방식을 사용하려면 HTML 구조에 대한 수정이 필요하며 이는 항상 가능하지는 않습니다.

결론적으로 여러 상위 요소에 걸쳐 n번째 하위 요소를 타겟팅하는 것은 CSS의 기본 기능 내에서 풀리지 않는 수수께끼로 남아 있습니다. 그러나 JavaScript 라이브러리를 수용하거나 명시적인 HTML 마크업을 사용하면 이러한 제한을 극복하여 복잡한 문서 구조 전반에 걸쳐 정확하고 미묘한 스타일을 지정할 수 있습니다.

위 내용은 CSS가 여러 상위 요소에 걸쳐 n번째 하위 요소를 타겟팅할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!