如何使用 CSS 選擇器僅定位嵌套列表中的直接子級？

用來辨識直接子元素的CSS 選擇器

在CSS 中，子選擇器的目的是定位作為某個元素的直接後代的元素。指定的父元素。然而，選擇器 ul > 。 li 可能會無意中選擇作為 ul 後代的所有 li 元素，而不僅僅是直接子元素。

答案：使用直接子選擇器

確保正確的 CSS 選擇器ul > 僅針對 ul 的直接子級李。此選擇器指定 li 元素應直接從 ul 繼承，不包括任何嵌套在子清單中的元素。

在 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++;
        });
    });
}

其他注意事項

• IE6 相容性：

#parent li { /* style appropriately */ }
#parent li li { /* back to normal */ }

IE6 相容性：

• IE6 相容性：

IE6 相容性： > ; IE6 不支援選擇器。解決方法是使用以下 CSS：

巢狀元素： 如果 li元素包含更多嵌套元素，則可能需要額外的選擇器來定位特定的結論透過採用>選擇器，當項目排序或移動時，MooTools 程式碼將準確更新直接子li 元素的位置。這可確保巢狀可排序清單中的編號正確，並且僅反映對頂級元素所做的變更。

以上是如何使用 CSS 選擇器僅定位嵌套列表中的直接子級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！