最直接可靠的方式是给目标li设置display: none，它彻底移除元素、不占空间、不影响ol自动编号；避免用list-style-type: none或hidden属性，因前者仅隐藏编号后者有兼容与优先级问题。

用 display: none 直接隐藏指定 li

要隐藏 ol 中某一个特定项（比如第 3 项），最直接、可靠的方式就是给那个 li 加 display: none。它会从渲染树中彻底移除该元素，不占空间、不响应事件，且不影响其他项的编号逻辑——ol 的自动计数仍按 DOM 顺序进行，被隐藏的项不会“跳号”。

常见错误现象：有人试图用 list-style-type: none 隐藏单个 li，结果发现编号还在（只是没显示标记），但列表项本身仍占位、缩进异常；还有人误以为隐藏后编号会自动重排，实际并不会。

• 写法示例：
  1. 第一项
  2. 第二项
  3. 第三项（完全隐藏）
  4. 第四项
• 若用 class 控制，CSS 规则写成：.hidden-item { display: none; }，然后在对应 li 上加 class="hidden-item"
• 注意：不要对 ol 或父容器设 display: none，否则整组都消失，不是“某一个项”

用 :nth-of-type() 精准定位并隐藏

当你要隐藏的是“第 N 个位置”的项（而非靠 class 或 ID 区分），:nth-of-type(N) 是更干净的 CSS 方式。它不依赖类名或 JS，纯样式控制，适合静态结构或构建系统生成的列表。

使用场景：比如所有文章页的 ol.toc 中，统一隐藏第 2 项（如“目录”标题本身）；或 CMS 输出固定结构时做视觉裁剪。

• 隐藏第 4 项：ol.toc li:nth-of-type(4) { display: none; }
• 避免用 :nth-child()：如果 ol 内有注释、文本节点或其它非 li 元素，:nth-child() 会错位；:nth-of-type() 只数 li，更健壮
• 兼容性没问题：IE9+ 及所有现代浏览器均支持

别用 hidden 属性隐藏 li？要看需求

hidden 属性语义上表示“当前不相关”，浏览器默认等价于 display: none，但它有额外行为：不参与表单提交、不出现在可访问性树中。而 li 本身不是表单控件，所以这点影响小；但要注意它和内联 style 的优先级冲突。

容易踩的坑：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 写了
• JS 动态控制时写 el.hidden = "true"（字符串）—— 实际是设了个无效值，得用布尔值 true 或 false
• 如果页面已有全局 CSS 如 [hidden] { display: block !important; }，那 hidden 完全不起作用

结论：能用 display: none 就别绕路；hidden 更适合服务端预渲染 + JS 后续接管的场景，不是为单个 li 隐藏设计的首选。

为什么不用 list-style-type: none 单独隐藏？

因为 list-style-type: none 只隐藏编号/标记，不隐藏内容本身。它会让 li 文本还在、仍占位、仍有默认缩进，视觉上像“漏了序号”，而不是“隐藏该项”。如果你的目标是让整个项从页面上消失，这方案就跑偏了。

性能与语义影响：

• 它不会触发重排（reflow），只影响绘制（repaint），但解决的是错误问题
• 屏幕阅读器仍会读出该 li 的内容，因为它没被移除，只是编号没了
• 若后续想恢复显示，还得额外处理缩进、margin 等布局残留，不如一开始就用 display: none

真正需要“仅隐藏编号”时（比如前 5 项编号、后面无编号），才用 list-style-type: none 配合 :nth-of-type(n + 6)；但那是另一类需求，不是“隐藏某一项”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！