如何使用 CSS 选择器仅针对直系子代：综合指南

如何使用 CSS 选择器仅定位直接子元素

使用嵌套元素时，仅对直接子元素设置样式可能具有挑战性排除所有后代。传统的 CSS 选择器，如 ul >李和#parent > li 将包含所有子元素，无论其嵌套级别如何。

CSS 中的直接子选择器

直接子选择器 >;只能用于定位父元素的第一级子元素。例如，要仅定位嵌套可排序列表中的顶级列表项，您可以使用以下选择器：

#parent > li

注意： IE6 不支持此选择器。

IE6 的解决方法

向后兼容IE6，您可以使用以下 CSS hack：

#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中文网其他相关文章！