Question

我有一组嵌套的相关主题/子主题，使用<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

1 个答案: