深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器(3/4)

div :first-child{color:red;}
div :last-child{color:blue;}
div span:first-child{color:green;}
div span:last-child{color:pink;}

　　如果使用javascript选择器要完成上面的最后一个功能，则如下所示

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var lastChild = divs[i].lastElementChild;
        if(lastChild.nodeName == 'SPAN'){
            lastChild.style.color = 'pink';
        }
}

唯一子元素

$(':only-child')

　　$(':only-child')选择器的匹配规则为：如果某个元素是它父元素中的唯一的子元素，才会被匹配

$('div span:only-child').css('color','green');

　　对应于CSS的:only-child选择器

div span:only-child{color:green;}

　　如果使用javascript实现，则如下所示

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var children = divs[i].children;
    if(children.length == 1 && children[0].nodeName == 'SPAN'){
        children[0].style.color = 'green';
    }
}

$('div span:only-child')
还原

    1.1


    2.1
    2.2