CSS counters函数在DITA step嵌套列表中出现多余.0后缀问题求助

问题 #

我用CSS的content属性结合counters()函数实现带嵌套编号的有序列表，HTML由DITA Open Toolkit自动生成，多数场景（包括混合ol/ul列表、带选项的步骤）都正常，但当结构为step>info>ul>li>ol>li时，步骤级编号会意外出现.0后缀。

示例DITA输入 #

<step>
    <cmd>Step with unordered list then an ordered list:</cmd>
    <info>
    <ul>
        <li>Nested UL li 1
        <ol>
            <li>Nested OL li 1</li>
            <li>Nested OL li 2</li>
            <li>Nested OL li 3</li>
        </ol>
        </li>
        <li>Nested UL li 2</li>
        <li>Nested UL li 3
        <ol>
            <li>Nested OL li 1</li>
            <li>Nested OL li 2</li>
            <li>Nested OL li 3</li>
        </ol>
        </li>
        <li>Nested UL li 4</li>
    </ul>
    </info>
</step>

生成的HTML代码 #

<li class="- topic/li task/step li step stepexpand">
   <span class="- topic/ph task/cmd ph cmd">Step with unordered list then an ordered list:</span>
   <div class="- topic/itemgroup task/info itemgroup info">
     <ul class="- topic/ul ul">
    <li class="- topic/li li">Nested UL li 1
          <ol class="- topic/ol ol" type="a">
          <li class="- topic/li li">Nested OL li 1</li>
          <li class="- topic/li li">Nested OL li 2</li>
          <li class="- topic/li li">Nested OL li 3</li>
          </ol>
    </li>
    <li class="- topic/li li">Nested UL li 2</li>
    <li class="- topic/li li">Nested UL li 3
          <ol class="- topic/ol ol" type="a">
          <li class="- topic/li li">Nested OL li 1</li>
          <li class="- topic/li li">Nested OL li 2</li>
          <li class="- topic/li li">Nested OL li 3</li>
          </ol>
    </li>
    <li class="- topic/li li">Nested UL li 4</li>
     </ul>
   </div>
</li>

实际显示效果 #

2. Step with unordered list then an ordered list:

   • Nested UL li 1

     2.0.1. Nested OL li 1

     2.0.2. Nested OL li 2

     2.0.3. Nested OL li 3

   • Nested UL li 2

   • Nested UL li 3

     2.0.1. Nested OL li 1

     2.0.2. Nested OL li 2

     2.0.3. Nested OL li 3

   • Nested UL li 4

我的CSS代码 #

li{
      margin: 0;
      margin-bottom: 0.6em;
}
ul{
  margin: 0;
  padding-left: 10pt; 
}

ol{
  counter-reset: item;
  margin: 0;
  padding: 0;
  list-style-type: decimal;
}

ol > li{
  display: table;
  counter-increment: item;
}

div > ul > li > ol > li,
section > ul > li > ol > li{
  display: table;
  counter-increment: nested;
}

.Num ol > li:before{
  content: counters(item, ".") ".";
  display: table-cell;
  padding-right: 0.6em;    
}

div > ul > li > ol > li:before,
section > ul > li > ol > li:before{
  content: counters(nested, ".") ".";
  display: table-cell;
  padding-right: 0.6em;    
}

.info ul > li ol > li{
  counter-increment: sublist;
}

.info ul > li > ol > li:before{
  content: counters(item, ".")"." counters(sublist, ".")".";
  display: table-cell;
  padding-right: 0.6em;    
}

请问这个多余的.0后缀来源是什么？顶层为普通li而非step时不会出现该问题。

原因分析与解决方案 #

原因 #

.0的核心来源是计数器递增规则的优先级冲突：

1. 全局规则ol > li会给所有ol下的li递增item计数器，但你针对info内部ol的li写了优先级更高的规则：.info ul > li ol > li{ counter-increment: sublist; }，这直接覆盖了全局规则的counter-increment: item。
2. 内部ol上设置了counter-reset: item，但因为li没有递增这个局部的item计数器，它的初始值一直是0。
3. 你在.info ul > li > ol > li:before中使用counters(item, ".")时，会遍历所有祖先层级的同名计数器：顶层步骤的item（值为2）+ 内部ol未被递增的item（值为0），最终拼接出2.0，再加上sublist的编号就变成了2.0.1。

解决方案 #

方案1：修复计数器递增规则

让info内部的li同时递增item和sublist计数器，确保内部ol的item能正常累加：

.info ul > li ol > li{
  counter-increment: sublist item; /* 同时递增两个计数器 */
}

方案2：简化计数器逻辑（推荐）

去掉冗余的nested、sublist计数器，统一使用item，利用CSS计数器的嵌套特性自动生成层级编号：

1. 删除以下冗余规则：

div > ul > li > ol > li,
section > ul > li > ol > li{
  display: table;
  counter-increment: nested;
}

div > ul > li > ol > li:before,
section > ul > li > ol > li:before{
  content: counters(nested, ".") ".";
  display: table-cell;
  padding-right: 0.6em;    
}

.info ul > li ol > li{
  counter-increment: sublist;
}

.info ul > li > ol > li:before{
  content: counters(item, ".")"." counters(sublist, ".")".";
  display: table-cell;
  padding-right: 0.6em;    
}

2. 为info内部的ol li补充基础的编号规则（如果需要区分样式可自定义）：

.info ul > li > ol > li:before{
  content: counters(item, ".") ".";
  display: table-cell;
  padding-right: 0.6em;    
}

这样内部ol的li会正常递增局部的item计数器，counters(item)会自动拼接顶层步骤编号+内部层级编号，输出2.1、2.2这类正确格式的编号。

内容的提问来源于stack exchange，提问作者Melanie Hinchey