CSS选择器只针对直接子元素，而不针对其他相同后代元素。
CSS选择器只针对直接子元素，而不针对其他相同后代元素。
我有一个嵌套可排序的列表，可以动态添加或删除项目，并且可以嵌套n级深。在嵌套时，会将一个新的ul元素注入到选定为父级的li元素中。列表的初始状态如下所示：
我正在使用MooTools进行排序等操作，它运行良好，但我在重置排序时遇到了问题。我尝试使用的每个CSS选择器也包括所有子元素，而不仅仅是属于列表而不属于子列表的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++;
});
}