css last-child 不起作用研究

可参考该描述，以及这篇，从父级定位至子级，希望子级中的最后一个元素执行额外的样式，发现不起作用，可以查看该父级是否只有一种该类型的子级，比如父级的类型为ul，子级如果都是li，则可以生效，如果其中夹杂着其它类型元素，比如span之类，则不起作用

如下代码，html 和 css 可以在codepen中调试

<ul>
    <li>3</li>
    <li class="complete">1</li>
    <li class="complete">2</li>
    <li>3</li>
    <li>4</li>
    <span></span>
</ul>
//如果span不加在最后，而是成为ul的第一个元素，也可以正常执行
li.complete:last-child{
    background-color: green;
}
li.complete:first-of-type {
  background-color: green;
}

同时这里也有详细介绍

lynxerzhang / JSSkills

css last-child 不起作用研究 #21