17370845950

html 中嵌套列表序号中断（如所有 `

` 都显示为“1.”）通常源于非法 dom 结构：`
` 和 `

` 必须直接作为 `
• ` 的子元素，而不能并列置于父 `
  ` 内部——否则浏览器会自动闭合前一个列表、重置计数器。本文详解合法嵌套规则与样式控制技巧。

  在 HTML 规范中，有序列表

  和无序列表
  只能合法地嵌套在
  • 元素内部
  ，而不能作为兄弟节点直接跟在
  • 后面、平级置于同一父
    或
    中。你原始代码的问题正在于此：

    
      
    General Aviation (piston-driven engines)
      
     
        
    Single-Engine Aircraft
      
      
     
        
    ...
      
      
     
        
    Dual-Engine Aircraft
      
    

    这种写法违反了 HTML 的内容模型（Content Model）：

    的直接子元素只能是
    • ；任何
    、
    或块级元素若未包裹在
    • 中，均会被浏览器自动修正（如插入隐式
    、开启新列表），导致计数器反复重置，最终所有
    都从 1. 开始。

    ✅ 正确做法是：将每个嵌套的

    或
    作为其对应
    • 的子元素
    。例如：

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

    这样，外层

    中的两个
    1. 将依次显示为 1. 和 2.，其内部嵌套列表也自然继承层级逻辑。

       ? 关键注意事项：

       • 不要使用已废弃的 标签（如示例中的 ），应改用 CSS 控制字体（如 font-family: Arial, sans-serif; font-size: 2em; color: lightblue;）；
       • 类选择器（如 .f, .u）仅控制样式，不影响计数逻辑；计数是否连续完全取决于 HTML 结构合法性；
       • 若需跨多个父
       • 共享同一计数序列（如“1. A → 2. B → 3. C”，即使它们属于不同顶级
       • ），则需使用 CSS counter-reset/counter-increment 配合 ::before 伪元素实现，但语义上已不属于标准嵌套列表，需谨慎评估可访问性与 SEO 影响。

       ? 总结：
       让

       序号连续递增，核心不是调整 CSS，而是修复 HTML 结构——确保每个
       或
       都严格嵌套在
       • 内部。遵循这一原则，配合你已定义的 .f（decimal）、.u（upper-roman）等类，即可生成语义清晰、样式可控、计数准确的多级列表。