CSS 선택기를 사용하여 직계 자녀만 타겟팅하는 방법: 종합 가이드

CSS 선택기를 사용하여 직계 하위 항목만 대상으로 지정하는 방법

중첩 요소를 사용할 때 직계 하위 항목과 직계 하위 항목만 스타일을 지정하는 것이 어려울 수 있습니다. 모든 하위 항목을 제외합니다. ul > li 및 #parent > li은 중첩 수준에 관계없이 모든 하위 요소를 포함합니다.

CSS의 즉시 하위 선택기

직속 하위 선택기 > 상위 요소의 첫 번째 수준 하위 요소만 대상으로 하는 데 사용할 수 있습니다. 예를 들어 중첩된 정렬 가능 목록의 최상위 목록 항목만 대상으로 지정하려면 다음 선택기를 사용할 수 있습니다.

#parent > li

참고: 이 선택기는 IE6에서 지원되지 않습니다.

IE6에 대한 해결 방법

IE6과의 이전 버전과의 호환성을 위해 다음 CSS 해킹을 사용할 수 있습니다.

#parent li { /* your styles for immediate children */ }
#parent li li { /* reset styles for descendants */ }

MooTools 관련 해결 방법

MooTools 기반 코드에서 문제는 getElements()가 직계 하위 항목만 검색하는 것이 아니라 모든 하위 항목을 검색하기 때문에 발생합니다. 이 문제를 해결하려면 getChildren()을 대신 사용할 수 있습니다.

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getChildren("li").getElements("a span[class=position]").each(function(pos){
                pos.set('text', posCount);
                posCount++;
        });
    });
};

getChildren()을 사용하면 각 중첩 목록의 직계 하위 항목에 대해서만 위치 텍스트가 올바르게 업데이트되도록 할 수 있습니다.

위 내용은 CSS 선택기를 사용하여 직계 자녀만 타겟팅하는 방법: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!