如何用纯CSS为分页列表中首末无特定类的<li>元素设置样式？

问题分析 #

当分页列表包含prev/next导航链接时，常规的:first-child/:last-child会选中导航项而非数字项，且:not()与:first-child的组合无法跳过导航项选中目标数字项——因为:first-child仅匹配父元素的第一个子元素，和元素类名无关。

解决方案 #

无需修改后端代码或给数字项额外添加类名，通过组合CSS选择器即可覆盖所有场景：

1. 选中第一个数字分页项

/* 无导航链接时，首个li即为数字项 */
.pagination li:first-child:not(.prev):not(.next),
/* 有prev链接时，选中prev后的第一个li（数字项） */
.pagination li.prev + li {
  background: blue;
}

2. 选中最后一个数字分页项

/* 无next链接时，最后一个li即为数字项 */
.pagination li:last-child:not(.prev):not(.next),
/* 有next链接时，选中倒数第二个li（数字项，next为最后一个元素） */
.pagination li:nth-last-child(2):not(.prev):not(.next) {
  background: green;
}

逻辑说明 #

• 第一个数字项：同时处理「无导航」和「有prev导航」两种情况，用相邻兄弟选择器+精准定位prev后的首个数字项。
• 最后一个数字项：同时处理「无导航」和「有next导航」两种情况，用:nth-last-child(2)选中next前的最后一个数字项。

内容的提问来源于stack exchange，提问作者Shtarley