Chrome浏览器CSS内容计数器渲染异常问题咨询

我希望使用自定义::before伪元素替换浏览器默认的list-style-type，选择该方案是因为::marker存在一些样式限制。

我的HTML代码中通过"type"属性来设置li元素前显示的字符类型。

HTML代码 #

<ol type="decimal">
  <li>First ordered item</li>
  <li>Second ordered item
    <ol type="a">
      <li>First ordered item</li>
      <li>Second ordered item
        <ol type="A">
          <li>First ordered item</li>
          <li>Second ordered item</li>
        </ol>
    </li>
    </ol>
  </li>  
</ol>

CSS代码 #

以下是我编写的CSS代码，使用counter来实现样式：

ol {
    /*list-style-type: none*/
    counter-reset: li;
}

ol > li:before {
    counter-increment: li;
    content: counter(li) ". ";
    position: relative;
    top: auto;
    left: auto;
    margin-right: 10px;
    color: red;
}

ol[type="decimal"] > li:before {
    content: counter(li, decimal) ". ";
}

ol[type="a" s] > li:before {
    content: counter(li, lower-alpha) ". ";
}

ol[type="A" s] > li:before {
    content: counter(li, upper-alpha) ". ";
}

type="a"和type="A"后的"s"表示区分大小写匹配。

Firefox与Chrome对比 #

查看渲染后的红色字符：

• Firefox能正确渲染这些列表，前两项为数字，中间两项为小写字母，最后两项为大写字母。
• Chrome渲染异常，所有项都显示数字。

请问这是我的代码问题、浏览器支持问题，还是Google Chrome的bug？

可运行代码片段 #

ol {
    /*list-style-type: none*/
    counter-reset: li;
}

ol > li:before {
    counter-increment: li;
    content: counter(li) ". ";
    position: relative;
    top: auto;
    left: auto;
    margin-right: 10px;
    color: red;
}

ol[type="decimal"] > li:before {
    content: counter(li, decimal) ". ";
}

ol[type="a" s] > li:before {
    content: counter(li, lower-alpha) ". ";
}

ol[type="A" s] > li:before {
    content: counter(li, upper-alpha) ". ";
}

<ol type="decimal">
  <li>First ordered item</li>
  <li>Second ordered item
    <ol type="a">
      <li>First ordered item</li>
      <li>Second ordered item
        <ol type="A">
          <li>First ordered item</li>
          <li>Second ordered item</li>
        </ol>
    </li>
    </ol>
  </li>  
</ol>

这是Chrome对HTML属性的处理行为导致的跨浏览器不一致，并非代码逻辑错误或单纯的bug：

1. 核心原因
   Chrome会自动将<ol>的type属性值转换为小写存储在DOM中，而Firefox会保留你编写的原始大小写。你的CSS中使用了s标记（大小写敏感匹配），导致ol[type="A" s]和ol[type="a" s]选择器在Chrome中无法匹配到对应的元素，所有列表项都 fallback 到了默认的数字样式。

2. 修复方案

方案一：移除大小写敏感标记（推荐） #

根据HTML规范，<ol>的type属性值本身就是不区分大小写的，所以不需要s标记，直接使用普通属性选择器即可：

ol[type="decimal"] > li:before {
    content: counter(li, decimal) ". ";
}

ol[type="a"] > li:before {
    content: counter(li, lower-alpha) ". ";
}

ol[type="A"] > li:before {
    content: counter(li, upper-alpha) ". ";
}

如果需要明确声明大小写不敏感，也可以加上i标记（效果一致）：

ol[type="a" i] > li:before {
    content: counter(li, lower-alpha) ". ";
}

ol[type="A" i] > li:before {
    content: counter(li, upper-alpha) ". ";
}

方案二：使用自定义属性避免自动转换 #

如果确实需要严格区分大小写（虽然不符合type属性的规范），可以改用自定义data-type属性，Chrome不会自动转换这类属性的大小写：
修改后的HTML：

<ol data-type="decimal">
  <li>First ordered item</li>
  <li>Second ordered item
    <ol data-type="a">
      <li>First ordered item</li>
      <li>Second ordered item
        <ol data-type="A">
          <li>First ordered item</li>
          <li>Second ordered item</li>
        </ol>
    </li>
    </ol>
  </li>  
</ol>

对应CSS：

ol[data-type="decimal"] > li:before {
    content: counter(li, decimal) ". ";
}

ol[data-type="a" s] > li:before {
    content: counter(li, lower-alpha) ". ";
}

ol[data-type="A" s] > li:before {
    content: counter(li, upper-alpha) ". ";
}

3. 补充说明
   Firefox保留属性原始大小写的行为和Chrome的自动转小写行为，本质上都是符合规范的（HTML属性值本身不区分大小写），只是实现细节不同。你的代码依赖了属性值的大小写保留，才导致了跨浏览器差异。

内容的提问来源于stack exchange，提问作者Kenton de Jong