css last不生效

在CSS中，我们可以使用:last-child选择器来选中父元素的最后一个子元素。

但是有时候我们会发现，:last-child选择器不生效，导致我们无法选中想要的元素。那么，这是为什么呢？

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li class="special">特殊项</li>
</ul>

/* 如果想选中最后一项，我们可以这样写 */
ul li:last-child {
  color: red;
}
/* 但是发现，特殊项的颜色并没有改变 */

/* 这是因为:last-child只能选中父元素的最后一个子元素，
而不是符合选择器的最后一个 */

那么，如何才能选中特殊项呢？这时我们可以使用:last-of-type选择器。

/* 将:last-child改为:last-of-type即可选中特殊项 */
ul li:last-of-type {
  color: red;
}

通过这种方式，我们可以很方便地选中想要的元素。