如何设置列表项为大写字母编号？CSS/ol属性设置无效求助

问题分析 #

你当前的HTML结构存在不符合列表嵌套规范的问题：<ol>的直接子元素必须是<li>，但你用了<div>包裹<li>；同时两个分类的<ol class="one">没有嵌套在父年份列表项<li class="roman">内部，导致层级混乱。另外list-style-type属性需要作用于列表元素（<ol>或<li>），而非<div>，所以之前的CSS设置无效。

修正方案 #

1. 修正HTML结构

调整列表嵌套层级，移除多余的<div>，让分类项作为<ol class="one">的直接子<li>，并将整个分类列表嵌套在父年份列表项内：

<li class="roman">1950-1990
  <ol class="one">
    <li>Romantic
      <ol>
        <li>The Tale of the White Serpent</li>
        <li>Candy Candy</li>
        <li>Neighborhood Story</li>
      </ol>
    </li>
  </ol>
  <ol class="one">
    <li>Action
      <ol>
        <li>Treasure Island</li>
        <li>Mobile Suit Gundam</li>
        <li>Doraemon</li>
      </ol>
    </li>
  </ol>
</li>

2. 调整CSS样式

将list-style-type: upper-alpha作用于<ol class="one">，让它的子<li>显示大写字母编号：

.one {
  list-style-type: upper-alpha;
}
.roman {
  /* 若需要父列表项显示罗马数字，可添加此属性 */
  list-style-type: upper-roman;
}

说明 #

• 列表元素必须遵循正确嵌套规则：<ul>/<ol>的直接子元素只能是<li>，<li>内部可嵌套其他列表或元素。
• list-style-type设置在<ol>上时，会作用于它所有的直接子<li>，从而实现分类项的大写字母编号效果。

内容的提问来源于stack exchange，提问作者Rodriguez P