HTML 嵌套列表中序号不递增？正确嵌套与语义化写法详解

html 中 `

` 的序号中断（始终显示为 1）通常源于非法嵌套：`
` 或 `

` 必须直接作为 `
• ` 的子元素，而非并列于 `
• ` 外部；否则浏览器会重置计数器。本文详解合法嵌套规则、修复方法及最佳实践。

  在 HTML 规范中，有序列表

  的连续编号依赖严格的嵌套结构
  ：所有子列表（无论
  还是
  ）必须嵌套在父列表项
  • 内部
  ，而不能与
  • 并列置于同一层级。你原始代码的问题正在于此——例如：

    
      
    General Aviation (piston-driven engines)
      
     
        
    Single-Engine Aircraft
      
      
    
        
     
          
    Tail wheel
          
    Tricycle
        
      
    

    这种写法违反了 HTML 的内容模型（

    /
    只能包含
    • ，不能直接作为
      的兄弟元素），导致浏览器将每个孤立的
      视为全新列表，强制从 1 开始计数。

      ✅ 正确做法是：将子

      或
      作为上一级
      • 的直接子元素
      。例如，“General Aviation”这一项本身应包含其所有子分类（含数字编号项和罗马字母项），结构如下：

      
        
      General Aviation (piston-driven engines)
          
       
            
      Single-Engine Aircraft
              
       
                
      Tail wheel
                
      Tricycle
              
            
            
      Dual-Engine Aircraft
              
      
                
      Wing-mounted engines
                
      Push-pull fuselage-mounted engines
              
            
          
        
       
      

      ? 关键原则：每个 的编号序列由其最近的、合法的父 定义；脱离 上下文的 将被重置。

      此外，建议优化以下细节提升可维护性与语义准确性：

      立即学习“前端免费学习笔记（深入）”；

      
      Beautiful.ai
      AI在线创建幻灯片
      下载
      • 弃用过时标签： 已被 HTML5 废弃，推荐使用 CSS 控制文本样式（如 h2 { font-family: Arial, sans-serif; color: #add8e6; font-size: 2.5rem; }）；
      • 移除冗余包装：避免无意义的
        ...
      套层，直接使用语义匹配的列表；
    • CSS 类复用：.f 等类名可简化为更具语义的名称（如 .decimal），或直接使用内联 type="1"（但推荐 CSS 控制）；
    • 验证结构：使用 W3C Markup Validator 检查嵌套合法性。

    最终修正后的完整结构示例（精简清晰版）：

    
      
    
        Aircraft Types
      
      
    
        
    General Aviation (piston-driven engines)
          
    
            
    Single-Engine Aircraft
              
    
                
    Tail wheel
                
    Tricycle
              
            
            
    Dual-Engine Aircraft
              
    
                
    Wing-mounted engines
                
    Push-pull fuselage-mounted engines
              
            
          
        
      
      
    
        
    Commercial Aviation (jet engines)
          
    
            
    Dual Engine
              
    
                
    Wing-mounted engines
                
    Fuselage-mounted engines
              
            
            
    Tri-Engine
              
    
                
    Third engine in vertical stabilizer
                
    Third engine in fuselage
              
            
          
        
      
    

    ✅ 此结构确保所有

    均处于有效
    1. 上下文中，浏览器将自动按顺序渲染 1., 2., 3.…，子列表也依层级正确继承编号类型。记住：HTML 列表的“序号连续性”本质是 DOM 结构的产物，而非 CSS 属性可单独修复的问题。