css 列表最后一个元素

CSS列表最后一个元素有时候需要特别的处理，例如需要改变它的颜色、样式等。要实现这个效果，我们可以使用CSS选择器 :last-child 或者 :last-of-type。

/* 使用:last-child选择器 */ul li:last-child {
      color: red;
}
/* 使用:last-of-type选择器 */ul li:last-of-type {
      font-weight: bold;
}

两个选择器的区别在于，:last-child选择器会匹配父元素中的任意子元素，而:last-of-type选择器则只会匹配与其类型相同的兄弟元素。例如:

/* 使用:last-child选择器 */  第一个  第二个  
第三个
/* 这个样式只会应用于最后一个 span 元素 */span:last-child {
      font-style: italic;
}
/* 使用:last-of-type选择器 */  第一个  第二个  
第三个
/* 这个样式会应用于最后一个 span 和最后一个 p 元素 */span:last-of-type, p:last-of-type {
      color: blue;
}
    

总之，使用:last-child或:last-of-type选择器可以方便地选中列表中最后一个元素，为它添加特殊样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！