时间戳

首页 > 解决方案 > 使用自定义年表样式化有序列表

css - 使用自定义年表样式化有序列表

问题描述

我有一个非常独特的场景，我似乎无法弄清楚以下样式的 CSS。

Title
1.1 Something
1.2 Something
1.3 Something else:
    1.3.1 Something
    1.3.2 Something
etc.

然后，在另一个 div 中，我需要加载完全相同类型的结构

Title Else
2.1 Something
2.2 Something

所有需要渲染的内容都遵循这种模式。

呈现的内容是FAQ 的手风琴列表，手风琴中的每个“节点”都必须从前一个数值开始。

它的 HTML 大纲看起来像这样：

<div class="accordion">
    <div class="accordion-crease">
    <h1>title 1</h1>
        <ol>
            <li>Something</li>
            <li>Something</li>
            <li>
                Something
                <ol>
                    <li>Else</li>
                    <li>Else</li>
                </ol>
            </li>
            <li>Something</li>
            <li>Something</li>
        </ol>
    </div>
    <div class="accordion-crease">
        <h1>title 2</h1>
        <ol>
            <li>Something</li>
            <li>Something</li>
        </ol>
    </div>
</div>

我想不通的是如何保留节点的最后一个数字，以便我可以做子集 1.3.x，我如何保留 [3] 或任何最后一个节点值，在子之前-设置滴。

我目前正在研究的解决方案是：

ol {
  &.clause-1 {
    counter-reset: item leaf;

    li {

      &:before {
        counter-increment: leaf;
        content: "1." counter(leaf) ;
      }

      ol li {

        &:before {
          content: "1." counter(item);
        }
      }
    }
  }
}

我假设我必须跟踪 LI 值，但计数器设置不起作用？

任何想法都会很棒。

标签： csshtml-lists

解决方案

推荐阅读