只要写过一段时间页面基本都躲不开列表。项目里最常见的两种列表一个是导航栏的ul li另一个是文章内容的ol li。很多人对列表样式的理解停留在list-style: none最多再换个圆点还是数字再往深一点就说不清了。这篇博文就把 CSS 里的列表样式从头到尾捋一遍从原生属性到::marker从list-style-image到 CSS 计数器把这些东西放在真实场景里对比到底哪种写法适合什么情况我都会结合自己的实际经验讲清楚。不需要你有很深的前端基础只要写过 HTML 结构、知道ul和ol区别就能跟着看下来。文中涉及的所有属性我都会说明它们适用的浏览器情况以及在实际开发中容易被忽略的坑。1. 列表样式的整体认知与底层逻辑1.1 列表到底由哪些部分构成要搞清楚列表样式得先知道浏览器是怎么渲染一个列表项的。你可以把每个li元素想象成一个独立的容器它内部其实分成了几个区域。最外层是li本身的内容盒子里面还有一块专门用来放置标记marker的区域这个区域默认位于内容盒子的左侧通常叫做“标记盒”。在旧式盒模型里标记盒的存在会和padding-left产生直接关系。如果你给ul设置一个比较大的左内边距标记会跟着往右移如果你把ul的list-style-position设为inside标记还会钻进内容盒内部直接挤在文本前面。理解了这一点后面很多奇怪的布局问题就能顺藤摸瓜找到原因。还有一点容易被忽略真正控制标记外观的核心其实是一个叫做::marker的伪元素。虽然多数人写列表样式时根本不直接碰它但理解它的存在才能解释为什么color会作用于数字或圆点为什么font-size也能影响标记尺寸。1.2 三条核心属性与简写顺序CSS 原生给list-style提供了三个子属性list-style-type控制标记的类型就是圆点、数字、字母这些。list-style-position控制标记放在内容盒外还是内容盒内。list-style-image允许用一张图片替代标记。三条属性可以分开写也可以合并成一条list-style简写。简写有个很实用的特性如果某条没写它会用默认值补齐。比如list-style: none表面上是设置了list-style-type: none实际上还会把list-style-image也重置为none同时list-style-position保持默认的outside不变。这里就有一个经验点当你把list-style-type设成none后其实是没有完全移除标记的。标记盒还在只是里面没有内容。更彻底的做法是同时把padding-left清零否则你会看到列表项左侧总有一段甩不掉的空白。这个坑在导航栏布局里特别常见。2. list-style-type标记外观的精细化控制2.1 常用值拆解与场景选择list-style-type的可选值非常多但实际项目中反复用到的就那么几个。disc是实心圆点circle是空心圆square是实心方块这三个常用于无序列表。decimal是十进制数字decimal-leading-zero是带前导零的数字lower-alpha和upper-alpha是小写和大写字母lower-roman和upper-roman是小写和大写罗马数字这几个常用于有序列表。选型逻辑其实很简单圆点系列适合并列关系的条目因为每个条目没有先后之分数字系列适合操作步骤、排行榜这类有明确顺序的场景字母和罗马数字更多出现在学术文档、法律条款这类需要区分层级的场景里。我在实际开发中维护过一个帮助文档二级标题用大写罗马数字、三级标题用小写字母配合ol的嵌套结构页面层级非常清楚。有个细节值得说decimal在绝大多数现代浏览器里默认是从 1 开始计数的但ol标签本身还支持start和reversed属性。start5可以控制从 5 开始编号加了reversed后列表会倒序。这两个属性是 HTML 层面的能力比 JS 计算序号值要可靠得多而且对屏幕阅读器友好。2.2 中文序号与复杂字符的取舍中文环境下经常需要“一、二、三”或者“壹、贰、叁”这样的序号。CSS 里确实提供了中文计数样式比如cjk-ideographic、simp-chinese-informal、simp-chinese-formal。simp-chinese-informal的编号就是一、二、三simp-chinese-formal是壹、贰、叁。但这里有个很麻烦的兼容性问题火狐浏览器直到现在对这套中文计数样式的支持都不算稳部分版本会出现编号措辞错乱的情况。所以我的建议是除非项目用户群体明确限定在 WebKit 内核浏览器里否则不要指望原生 CSS 帮你输出中文序号。更稳妥的做法是用 CSS 计数器搭配::before伪元素自己拼出序号内容或者干脆在后端生成模板时直接输出成静态文本。至于那些想要“第1条”“第2条”这种前后带文字的效果原生list-style-type是做不到的同样得靠计数器或者后端输出。顺带提一个冷门值string类型比如list-style-type: →这其实是 CSS 列表标准中允许的写法可以直接把标记变成任意字符。浏览器支持度目前已经不错Chrome 和 Firefox 都能用。用它来做步骤列表的前缀箭头比::before方案少写一个伪元素代码更干净。不过 Safari 某些旧版本不认生产环境用之前还是先测一下。删除线这个效果虽然不属于列表样式的直接功能但如果你在列表项里配合text-decoration: line-through可以非常方便地实现“已删除/已过期”的视觉状态比如任务清单中的完成项这个组合思路我经常用。3. 样式呈现位置与标记尺寸易被忽略的两个细节3.1 list-style-positioninside 与 outside 的真实差异outside是默认值标记位于列表项内容盒的外部视觉上标记和文本之间有一段天然间距。inside会把标记放进内容盒内部标记和第一行文本紧挨在一起。很多人以为这只是左右偏移的区别实际上它对段落折行的影响才是关键。在outside模式下当文本超过一行发生折行时后续行会整齐地对齐到第一行文本的起始位置标记和文本能保持明确的视觉分离。切换成inside后标记占据的是内容盒内部的空间所有文本行都以内容盒的左边缘为起点折行后第二行文本会直接顶到左边缘标记就嵌在文本块的左上角视觉上会显得乱。从实际体验来说绝大多数列表场景都应该保持outside。inside比较适用的场景是那些标记本身就是内容一部分的情况比如列表项里要放自定义 checkbox 样式、或者标记特别短、希望它跟文本融合得更紧密。如果你只是为了缩小标记和文本的间距正确做法是调整ul的padding-left而不是切换到inside。3.2 用 ::marker 控制颜色与尺寸::marker这个伪元素是 CSS Pseudo-Elements Level 4 引入的能力专门用来选中列表项的标记部分。它支持修改的属性不多但覆盖了最常用的几个color、font-family、font-size、font-weight、content。举个例子想让有序列表的序号变成蓝色、粗体、比正文大一号传统做法是把序号包进 span 里还得在后端改模板。有了::marker直接写li::marker { color: #1a73e8; font-weight: 700; font-size: 1.2em; }效果立竿见影而且不需要改动任何 HTML 结构。这个特性对维护老项目特别友好尤其是那种列表项内容是后端动态生成的页面用::marker可以绕开模板改动纯 CSS 就完成视觉定制。需要提醒的是::marker支持的属性非常有限不要把display、float、margin等属性写在里面这些都会被浏览器忽略。另外content属性在::marker里虽然可以改写标记文本但它只能吃字符串没法用attr()读取标签属性所以动态内容还是得靠计数器。4. 用图片与计数器替换原生标记4.1 list-style-image 的局限与替代思路list-style-image允许直接用图片作为标记比如list-style-image: url(dot.png)。听起来很美好实际用起来限制不少。图片的尺寸不能像普通img那样方便地缩放浏览器会直接按图片原始尺寸渲染想控制大小只能先切好图。还有如果图片加载失败标记区域会显示一个空的占位符视觉上很难看。另一个问题是颜色适配。如果页面有暗色模式需求一张黑色圆点图片在暗色背景下就很突兀你还得专门准备另一套图片做媒体查询。这类问题让list-style-image在真实项目里的使用率很低。要替代图片标记我优先推荐 SVG 背景图方案。具体做法是把li的list-style-type设为none然后给li加background-image用background-position和background-size控制图标位置与大小。色值变量也能直接作用到 SVG 背景上如果用内联 SVG 的 data URI 写法修改颜色就是改代码里的一处占位符配合 CSS 变量还能实现主题切换。4.2 CSS 计数器真正可控的序号引擎当原生list-style-type满足不了“第X条”或者“C-001”这种复杂序号时CSS 计数器是最推荐的方案。看一段核心代码.ol-step { counter-reset: step-counter; list-style: none; } .ol-step li { counter-increment: step-counter; position: relative; padding-left: 36px; } .ol-step li::before { content: 第 counter(step-counter) 条; position: absolute; left: 0; top: 0; }这里counter-reset在父容器上把计数器初始化为 0counter-increment在每个li上让计数器加 1content里通过counter(step-counter)取出当前值。position: absolute是为了让序号不占文档流配合padding-left给文本让位这样无论文本折多少行序号都稳稳地固定在左上角。这个方案最强大的地方在于嵌套。你可以在一个ol里再放一个ol然后给不同层级的计数器设置不同的连接方式比如二级序号自带上级前缀做出“1.1、1.2”这样的效果。下面是经典的嵌套序号实现ol.nested { counter-reset: section; list-style: none; } ol.nested li { counter-increment: section; } ol.nested li::before { content: counter(section) .; } ol.nested li ol { counter-reset: subsection; } ol.nested li ol li { counter-increment: subsection; } ol.nested li ol li::before { content: counter(section) . counter(subsection); }我把这种写法直接应用在项目里的多层级说明文档中二级标题和三级标题的编号完全由 CSS 自动生成不用后端拼接结构调整时不用重新填序号省了我自己维护文档的时间。4.3 多级列表与映像方案对比把三种可替代原生标记的方案放在一起看方案优点缺点适用场景::marker结构零改动、支持颜色与字号调整可调属性少、content 不支持外部动态值只改颜色、字号、加粗background-image图标位置大小可控、支持主题变量需要额外写伪元素或背景定位、占文档流处理麻烦需要自定义图形标记CSS 计数器序号生成逻辑完整、支持多级嵌套需要辅助定位、代码量相对多复杂序号、多级目录真实项目中这几种方法经常混用。比如一个商品详情页的商品参数列表普通属性用原生圆点卖点标签用背景图操作步骤用计数器。这不是炫技而是每种场景都有自己最适合的方案。5. 项目中的真实场景从重置到导航到响应式5.1 重置列表时的连带影响现在主流 CSS Reset 里都会写一句list-style: none但很多新手漏掉了对应padding-left的重置。即使把list-style-type设为none浏览器默认样式表里ul、ol自带的上、下外边距和左内边距并不会消失。这时候列表整体看起来还有一段缩进排查掉这个方法的人会一头雾水。我的建议是项目初始化时统一加上类似下面这段样式不要让默认样式在后面反复给你使绊子ul, ol { margin: 0; padding: 0; list-style: none; }但这里要保留一个意识清掉样式不等于清掉语义。屏幕阅读器依然会把ul里的多个li当作列表来读。如果你的目的只是不想让列表语义影响读屏可以保留list-style-type不设置纯用 padding 做视觉上的“无标记列表”如果项目对无障碍要求不严格那清掉也没问题。重点在于你要知道自己清楚的是什么不是无脑一把梭。5.2 用列表做导航与卡片布局的经典套路导航栏是最常见的ul li应用场景。核心问题在于一旦给li设置display: flex或display: inline-flex它就不再是display: list-item标记会直接不渲染。所以导航栏里写不写list-style: none其实都无所谓关键是你用了什么 display 值。常见的做法是让ul变成 flex 容器li保持块级再配合a标签的display: block撑满可点击区域.nav { display: flex; gap: 16px; padding: 0; margin: 0; list-style: none; } .nav a { display: block; padding: 8px 16px; text-decoration: none; border-radius: 6px; }这套结构比float方案或者inline-block方案都稳。gap处理间距不用每项单独设 margina标签 block 化后点击区域覆盖整个矩形移动端上不会出现只能点中文字的情况。当列表项数量超过容器宽度时加上flex-wrap: wrap就自动换行不会溢出。卡片布局也类似经常把li直接设置为display: grid或flex让内部内容自由排列。此时标记天然消失但结构依然是“一个列表包着多个列表项”语义上无论是产品列表还是表格卡片都说得通。5.3 多级菜单、面包屑等场景实践多级菜单的做法通常是用嵌套ul。这时要给不同层级的ul设置不同的padding-left实现缩进层级。如果完全清掉 padding所有级别都顶格对齐视觉上就分不出父子关系了。所以重置样式时要特意为嵌套情况留出恢复空间比如给子级的ul一个margin-left或者padding-left。面包屑导航是另一个典型场景。很多人会直接用div span但我更倾向用ol因为面包屑本质上是有“首页 当前页”顺序的适合用有序列表表达。做法是把list-style: none清掉然后在li:not(:last-child)::after里写入分隔符.breadcrumb { display: flex; list-style: none; padding: 0; } .breadcrumb li::after { content: /; margin: 0 8px; color: #999; } .breadcrumb li:last-child::after { content: ; }这样不仅结构清晰而且分隔符是纯 CSS 控制的增减面包屑项完全不用管分隔符的显示状态。后续如果想改成或者→只改一处content就行。6. 常见问题与排查技巧实录6.1 标记不显示可能是什么原因标记消失最常见的原因有三个。第一list-style-type被设置为none这时标记盒还在但内容是空的。第二li的display被改成flex、grid、inline-block等非list-item值一旦不再是list-item浏览器就不会生成::marker。第三list-style-image指向的图片加载失败标记区域出现空白占位。排查顺序很固定先看计算样式里display是什么再看list-style-type是不是被某个通用样式覆盖了最后看有没有设置过list-style-image。如果是第三种情况把图片换成背景图方案能彻底避开问题。6.2 标记位置错乱是怎么回事位置错乱大多数跟list-style-position有关。当它被设为inside同时li内又有padding-left时标记会进一步往右偏移导致标记和文本的距离忽大忽小。另外如果li是 flex 容器标记区域根本不参与 flex 布局视觉上就会被丢掉这可能让人误以为位置错乱。所以当你在li里需要同时使用display: flex和“显示一个序号”时正确思路是放弃原生标记改用::before或者::markerposition: absolute方案手动控制序号的位置和间距而不是在校原生标记的属性上死磕。6.3 兼容性差异与降级策略不同浏览器对列表样式的支持程度差异确实存在。老牌浏览器和刚普及的新特性之间最容易出问题的是中文计数样式和::marker的content覆盖。我的处理原则是基础样式一定用兼容性最好的方案避免让 CSS 承担太多“内容生成”的重任。安全清单大致如下表特性ChromeFirefoxSafari降级方案list-style-type: disc/decimal支持支持支持见处理方式list-style-type: cjk-ideographic支持支持不稳定支持用字体或计数器::marker改颜色字号支持支持支持可用li::before替代list-style-type: 字符支持支持部分支持用背景图list-style-image支持支持支持图标建议用背景图另外提醒一下Safari 对::marker的content重写支持不完整生产项目如果兼容到 Safari 老版本尽量只依赖color和font-size这类样式化能力不要用它来改文本。6.4 一个常被忽略的细节focus 样式列表项可点击时很多人只给a设置了:focus样式忘了li本身没有任何可聚焦的特性。如果你用li包着可交互卡片需要给内部a做完整的 focus 可见样式否则键盘用户按 Tab 时看不出焦点在哪。这和列表样式的视觉定制不算强相关但既然列表项经常承载交互内容值得在项目里留意一下。在操作步骤列表里这个细节尤其关键。因为步骤列表通常就是用户操作路径键盘用户过了第一项到第二项时如果焦点样式不明显整个流程就断了。我给ol步骤列表的每个a都加了:focus-visible外圈阴影能有效兼顾美观和可用性。列表样式看似基础实际里牵扯到标记盒、伪元素、计数器这些不算烂大街的知识点。真正在项目里把列表写顺手、写出稳妥的视觉效果往往不是靠记住某个属性而是理解这些背后的机制。希望这篇博文里讲的这些细节能帮你少走一点弯路。