CSS选择器,仅针对直接子级而不是其他相同子孙


68

我有一个嵌套的可排序列表,可以动态添加或删除项目,并且可以嵌套n级。嵌套时,会将新的ul元素注入选择为父元素的li元素中。列表的初始状态如下所示:

<ul id="parent">
    <li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li>
    <li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li>
    <li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a>
        <ul>
            <li id="A"><a href="" class="listLink"><span class="position">1</span>A</a></li>
            <li id="B"><a href="" class="listLink"><span class="position">2</span>B</a></li>
            <li id="C"><a href="" class="listLink"><span class="position">3</span>C</a></li>
            <li id="D"><a href="" class="listLink"><span class="position">4</span>D</a></li>
            <li id="E"><a href="" class="listLink"><span class="position">5</span>E</a></li>
            <li id="F"><a href="" class="listLink"><span class="position">6</span>F</a></li>                    
        </ul>
    </li>   
    <li id="Four"><a href="" class="listLink"><span class="position">4</span>Four</a></li>
    <li id="Five"><a href="" class="listLink"><span class="position">5</span>Five</a></li>
    <li id="Six"><a href="" class="listLink"><span class="position">6</span>Six</a></li>                    
</ul>

我正在使用MooTools进行排序等,并且工作正常,但是在排序时正确重置位置文本时遇到了麻烦。我尝试使用的每个CSS选择器还包括所有子项,而不仅仅是列表中的li元素,而不是子列表中的所有li元素。假设除了id,position和text外,所有列表中的每个li元素都与其他所有元素相同。是否有一个选择器只能让直子生下来?还有另一种方法吗?

我尝试了一些子选择器,例如上述选择器:

  • ul > li将选择所有ul子元素的所有li元素,而不仅仅是直接子元素
  • #parent > li 与上述相同。

这是删除项目时我当前正在运行的功能,该功能无法处理排序,效果很好,只是更新位置。请注意,它也是MooTools语法:

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

当前,更改主级别上的任何项目顺序将重新编号所有1-12,甚至是子列表。更改子列表中的任何项目都会为该列表提供正确的数字,但会导致父列表在编号中错误地计算所有子li元素。

我觉得这是一个丑陋的骇客,但确实有效:

var drop = function(){
    var ulCount = 1;
    $$('ul').each(function(item){
        if(item.get('id') != 'parent') { 
            item.set('id', 'id-'+ulCount);
        }
        var elId = item.get('id');
        var posCount = 1;
        $(document).getElements('#'+elId+'>li>a>span[class=position]').each(function(pos){
            pos.set('text', posCount);
            posCount++;
        });
        ulCount++;
    });
}

Answers:


103
ul > li

只做直系孩子。因此,例如,仅使用顶级列表元素,可以使用:

#parent > li

注意: IE6不支持此功能。

向后兼容的常见解决方法是执行以下操作:

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

这比较繁琐,因为您必须先应用样式然后将其关闭(并且您不一定知道旧值是什么),但这是唯一的IE6友好的纯CSS解决方法。

编辑:确定您有一个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++;
        });
    });
}

或类似的东西。


谢谢,但是MooTools处理IE6问题,所以这不是我想要的。我正在寻找一种重置跨度文本以指示该列表(而不是父级或子级列表)正确位置的方法,这是问题所在
。– VirtuosiMedia

1
#parent> li绝对只允许立即行动的孩子。如果那不起作用,您还有其他事情要做。可能需要更多信息。
cletus

MooTools允许我使用CSS3选择器,但是由于我无法仅更改直接子级,因此它也会错误地更改所有子列表的编号。
VirtuosiMedia

谢谢您的帮助。我最终做了类似的事情。
VirtuosiMedia

5
无论出于何种原因,显然#parent > li不是有效的CSS。Chrome实际上对此有所抱怨,因此我在规格上进行了查找,并确定它只允许使用format的通用元素名称(不选择id)E > F
亚历克斯W

0

原始问题未得到回答。:only-child只有在独生子女没有后代子女时才起作用。最初的帖子表明,包含后代的孩子是由于ul> li,而实际上是由于:only-child中的错误。矛盾的是::first-child与后代孩子一样,在列表中选择具有后代孩子的第一个孩子,但:only-child则没有。我在Firefox,Opera和Chrome浏览器中对此进行了检查。这是一个例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<style>
.list>ul>li:only-child {color:red}
.list>ul>li:first-child {color:green}
.list>ul>li:last-child {color:blue}
</style>
</head>
<body>
<div class="list">
<ul><li>Item one</li><ul>
<l>Subitem one</li>
<li>Subitem two</li></ul></li><!--<li>Item two</li>
<li>Item three</li>-->
</ul></div>
</body></html>

要激活:first-child和:last-child规则,请取消注释最后两项。因此,Selectors Level 3标准的实现在主要浏览器中是不一致的。如果存在:only-child规则并且唯一的子代具有后代,则不应激活:first-child规则。在该示例中,唯一的孩子应该是红色,但它是绿色。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.