通过CSS选择器与列表属性结合，可精准控制无序列表样式：利用ul>li选择直接子元素，区分层级；使用:first-child、:last-child、:nth-child实现首末项及奇偶行样式；通过list-style-type、list-style-image或::before伪元素自定义项目符号，提升视觉层次与可读性。
在网页设计中，我们经常需要对无序列表（ul）中的列表项（li）进行精细化样式控制。通过结合CSS选择器与列表样式，可以灵活地为不同层级或位置的列表项设置特定外观，提升页面结构的可读性和视觉层次。
使用后代选择器与直接子元素选择器区分层级
当
- 嵌套使用时，常需对外层和内层的
- 应用不同样式。利用后代选择器和子元素选择器可精准控制：
- ul li：匹配所有后代li，包括嵌套多层的项
- ul > li：仅匹配ul的直接子元素li，不作用于嵌套列表中的li
例如，只给顶层列表项添加边框，避免影响子列表：
ul > li {
border-bottom: 1px solid #ccc;
padding: 8px 0;
}利用伪类选择器控制首项、末项或奇偶行
通过CSS伪类，可以为列表中的特定位置项设置样式，无需额外类名：
立即学习“前端免费学习笔记（深入）”；
- li:first-child：选中第一个li
- li:last-child：选中最后一个li
- li:nth-child(even/odd)：分别选中偶数或奇数项，实现隔行变色
示例：去除首项上边距、末项下边距：
ul > li:first-child { margin-top: 0; }
ul > li:last-child { margin-bottom: 0; }自定义列表符号与文本样式结合
默认的圆点符号可能不符合设计需求。可通过以下方式自定义：
- 使用list-style-type更改标记形状（如 disc、circle、square、none）
- 设置list-style-image使用图片作为项目符号
- 用list-style: none清除默认符号，结合::before伪元素添加图标或特殊字符
例如，用FontAwesome图标替代原生符号：
ul.custom-list > li {
position: relative;
padding-left: 20px;
}
ul.custom-list > li::before {
content: "●";
color: #007acc;
position: absolute;
left: 0;
top: 6px;
}基本上就这些。合理组合CSS选择器与列表属性，能高效实现复杂列表布局的样式控制，同时保持HTML结构简洁。关键在于理解选择器的作用范围和优先级，避免样式冲突。
