5

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

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

4

1 回答 1

1

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

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

这是一个演示：

https://jsfiddle.net/q34wdw5p/

于 2016-05-15T05:24:36.840 回答