嵌套列表 css 样式

Question

我想创建 css 以生成以下嵌套列表。

1. item1

子项目
子项目

2. item2

子项目
子项目

我想要的是修改数字（粗体或红色）。我在互联网上搜索，但我 found 是 css 的有序列表。当我用 css 创建一个嵌套列表时，我得到的是额外的数字来代替项目符号。有人可以帮忙吗？

Answer 1

您只能在具有此 HTML 结构的 ol 的直接子代 li 上使用 CSS counter，然后更改颜色和字体粗细。

ol {
  list-style: none;
  counter-reset: ol-counter;   
}
ol > li:before {
  counter-increment: ol-counter;               
  content: counter(ol-counter) ". "; 
  color: red;
  font-weight: bold;
}

<ol>
  <li>item1
    <ul>
      <li>sub item</li>
      <li>sub item</li>
    </ul>
  </li>
  <li>item2
    <ul>
      <li>sub item</li>
      <li>sub item</li>
    </ul>
  </li>
</ol>

嵌套列表 css 样式

Nested list css styling

css

nested-lists

html-lists