li元素的常见伪类：ul列表第一个li和最后一个li的样式解决办法

最新推荐文章于 2025-10-08 10:41:29 发布

原创最新推荐文章于 2025-10-08 10:41:29 发布 · 4k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS伪类为前端列表项（如热门文章列表）设置样式，包括针对第一个、最后一个及特定位置的列表项进行个性化设计的方法。

在网站开发中，尤其是对资讯网站中，通常需要做出热门文章的列表，排名等等样式，里面就会应用到排序的从0-10等等数值，数值中，我们通常会对前三或是前五进行特别的样式调整。比如我们需要把第一个改成红色的背景，把最后一个样式下面加一个更多的按钮，这样我们都可以使用li伪类来对前端的样式进行调整。

尤其是在wordpress主题的开发中，在前端应用很广泛li的第一个及最后一个都可以进行单独的设置，甚至是li的奇偶数的，或是特定的某个位置都可以使用伪类来进行设置，相当于li的一个小跟班，只对某个li起作用。

第一个li的样式：li:first-child { background:#f00; } 最后一个li的样式：li:last-child { background:#000; } 第n个li的样式：li:nth-child(n) { background:#000; } 倒数第二个li的样式：nth-last-of-type(2){ background:#000; } 奇数列表：li:nth-child(odd) { background:#f00; } 偶数列表：li:nth-child(even) { background:#f00; }

第一个li的样式：li:first-child { background:#f00; }

最后一个li的样式：li:last-child { background:#000; }

第n个li的样式：li:nth-child(n) { background:#000; }

倒数第二个li的样式：nth-last-of-type(2){ background:#000; }

奇数列表：li:nth-child(odd) { background:#f00; }

偶数列表：li:nth-child(even) { background:#f00; }