CSS: 嵌套 ol 从 1.1 开始编号

Question

我有一组相关的嵌套 topics/subtopics，使用 <ol>。到目前为止，我在树的顶部使用的 CSS 效果很好，但用户可以单击子主题，我正在重新绘制 <ol> 的嵌套集，从用户单击的位置开始。我的问题是，我需要尊重章节编号等。

所以，如果一个典型的结构可能是这样的：

Vehicles
  1. Automobile
    1.1 Street
      1.1.1 Sedan
      1.1.2 Coup
      1.1.3 Truck
    1.2 Race
      1.2.1 
  2. Rail
    2.1 Locomotive
    2.2 High Speed
    2.3 Uni

并且用户点击了1.1 Street，我需要显示：

1.1 Street
  1.1.1 Sedan
  1.1.2 Coup
  1.1.3 Truck

我目前的CSS是这样的：

ol li {display:block;}
ol > li:first-child {counter-reset: item;}
ol > li {counter-increment: item; position: relative;}
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;}

我尝试了一些带有第二个计数器的变体，但没有骰子！使这个问题复杂化的是，树可以无限深，因此任何硬编码解决方案都无法解决。谢谢！

Answer 1

您可以将列表包裹在外部 <ol><li> 块中，然后更新 CSS 以显示嵌套内容的计数器

ol ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;}

这是一个演示：

https://jsfiddle.net/q34wdw5p/

CSS: 嵌套 ol 从 1.1 开始编号

CSS: nested ol start numbering at 1.1

css

nested

css-counter