使用结构、状态和逻辑伪类可高效实现复杂列表样式。通过 :first-child、:last-child 控制首末项边距，:nth-child 实现奇偶行交替，:not(:last-child) 添加分隔线；结合 :hover、:focus、:active 增强交互反馈；连用 :nth-child(even):not(:first-child) 精准设置背景色，利用 :only-child 处理单项特殊情况；响应式中配合媒体查询隐藏超量或空内容项，提升维护性与用户体验。
在CSS中，伪类是实现复杂列表样式的关键工具之一。通过结合结构伪类、状态伪类和逻辑组合，可以轻松控制列表项的显示效果，而无需额外的HTML标签或JavaScript。
使用结构伪类选择特定位置的列表项
结构伪类能根据元素在父容器中的位置来选中它们，这对列表特别有用。
- :first-child 和 :last-child 可以分别选中第一个和最后一个列表项，适合用来去除首项的上边距或末项的下边距。
-
:nth-child(n) 支持公式（如
2n+1）实现奇偶行交替，常用于斑马条纹效果。 - :nth-of-type(n) 在混合标签类型时更精确，适用于复杂嵌套列表。
-
:not() 能排除特定项，比如
li:not(:last-child)给除最后一项外的所有项添加分隔线。
li:not(:last-child) {
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
margin-bottom: 8px;
}
利用状态伪类增强交互体验
对于可点击或可聚焦的列表项（如导航菜单），状态伪类能提升用户操作反馈。
- :hover 实现鼠标悬停高亮。
-
:focus 确保键盘可访问性，配合
tabindex使用更佳。 - :active 定义按下状态，增强点击感。
li[role="button"]:focus {
background-color: #e0f0ff;
outline: 2px solid #007cba;
}
组合伪类实现高级布局效果
多个伪类连用可以构建更精细的规则，比如只对非首个的偶数项设置背景色。
立即学习“前端免费学习笔记（深入）”；
-
li:nth-child(even):not(:first-child)匹配从第二项开始的偶数项。 -
li:first-child::before可在首项前插入引导图标或序号。 - 结合 :only-child 处理仅有一项的特殊情况，避免多余样式。
ol li:only-child::marker {
content: "";
}
响应式列表中的伪类应用
配合媒体查询，伪类还能动态调整列表在不同设备上的表现。
- 在移动端使用
:nth-child(n+4)隐藏超出的项目，并通过按钮展开。 - 利用
li:empty隐藏内容为空的项，保持列表整洁。
