Question

在此示例中，li：last-child定义位于nth-of-type定义之后，但由于某种原因，元素的样式设置为首先出现的定义，而不是最后出现的定义。这是什么原因？（最后一个孩子应该显示为蓝色）

HTML：

<ul></ul>

使用Javascript：

$(function(){
   var $ul = $('ul');
   var $console = $('div.console'); 

    for( var i = 0; i < 15; i++ ){
      $ul.append('<li>'
        + 'Latest Download ' + (i + 1)
        + '</li>'
     )

     if( ! ((i + 1) % 5) ){
       $ul.append('<div>clear div</div>');   
     }



    }
});

CSS：

ul {
    list-style: none;
}

ul > li {
    display: inline-block;
    padding: 5px;
    background-color: lightblue;

    border: 1px solid blue;

    color: green;
    font-family; Arial,Helvetica;
}

ul > li:nth-of-type(5n) {
    color: yellow;
}

ul > li:first-child {
    color: red;
}

ul > li:last-child {
    color: blue;
}

JS小提琴： http://jsfiddle.net/eQRgw/1/

Answer 1

问题是li元素不是最后一个孩子，div是ul元素的最后一个子元素，因此:last-child只匹配最后一个div元素

使用last-of-type

ul > li:last-of-type {
    color: blue;
}

演示：Fiddle

注意：ul不应该将div作为孩子

为什么最后一个孩子不在这个例子中工作？

1 个答案: