如何使用 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 兼容性： > ; IE6 不支持选择器。解决方法是使用以下 CSS：

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

• 嵌套元素： 如果 li 元素包含更多嵌套元素，则可能需要额外的选择器来定位特定的

结论

通过使用 >选择器，当项目排序或移动时，MooTools 代码将准确更新直接子 li 元素的位置。这可确保嵌套可排序列表中的编号正确，并且仅反映对顶级元素所做的更改。

以上是如何使用 CSS 选择器仅定位嵌套列表中的直接子级？的详细内容。更多信息请关注PHP中文网其他相关文章！