问题标签 [css-counter]

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

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

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

我到目前为止的 CSS 是这样的：

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

我想要这样的列表样式（jsfiddle）：

如您所见，列表样式为：

1. 不是 CSS 提供的样式之一，即自定义样式
2. 是常规的，即我不必为 s 手动输入值 1、2、3 等<li>。因此，如果我有四个<li>s，它会自动放置四个绿色圆圈，其值为 1,2,3,4。

问题：

我如何完成这项任务？

我需要为称为寄存器的特定类型的家谱报告创建有序列表。在寄存器中，所有的孩子都用小写罗马数字编号，有后代的也用阿拉伯数字编号，如下所示：

你可以在这个小提琴上看到我最初的尝试：https ://jsfiddle.net/ericstoltz/gpqf0Ltu/

问题是阿拉伯数字需要代代相传，即在单独的有序列表上。当您查看小提琴时，您可以看到阿拉伯数字的第二代再次从 1 开始，但它应该以 2 开头，因为这是分配给该人作为 1 的孩子的数字，并且 2 的第一个孩子的后代应该是 4 而不是 5。所以当我需要它更加一致时，计数器会以某种部分方式继续到第二个列表。

澄清一下：这不仅仅是顺序编号。每个有后代的人都由一个唯一的数字标识，并且该数字将出现两次：该人作为孩子和该人作为父母。

由于标题需要将世代分开，有时它们之间还有叙述。

我觉得我非常接近，只是忽略了一些东西来让它发挥作用！

更新：已解决。请参阅小提琴，了解我是如何用两个计数器做到这一点的。

我的目标是逐行打印文本文件并在开头附加行号。像这样：

n是 CSS 中的一个变量，负责元素在其父元素和子选择器内的索引，您可以对其执行操作，例如。nth-child(2n + 3)

有什么方法可以获取这个变量并将其作为纯文本插入？基本上是这样的：

我知道我可以使用我正在使用的 SASS 来实现这一点，我只是想知道是否有某种方法可以使用 vanilla CSS 来实现它。

我正在制作一个多列、CSS 编号的 TOC，如下所示：

由于 CSS 列是不可控的，因此使用 JS 和浮动“列”类进行包装。

这是我遵循的示例： http ://www.2ality.com/2012/01/numbering-headingshtml.html

这是我使用的 CSS：

不知何故，我无法让 Level-2 计数器增加。

我使用下面的 CSS 代码将行号添加到表行：

但它的内容在第十行之后没有对齐。见下图：

但我想要这样的东西：

我也尝试添加padding，但这不是一个有效的解决方案。

如何解决这个问题？

这是我现在的小提琴。

我已经订购了具有反增量属性的列表。如果长文本分成多行，如何使长文本与第一行的左侧偏移量相同？现在第二行显示在数字下方。

这是小提琴（查看 2.3 项）：http: //jsfiddle.net/1vh1tt81/1/

我能够在“li：before”元素上使用“position：absolute”来达到预期的结果，但这会导致我的项目特有的其他问题，所以这对我来说不是一个好的解决方案。

有一个类似的问题，但在标记中有一个附加标签，而我不能有任何附加标签： https ://jsfiddle.net/rkmv3rn3/10/

当使用通常的方式通过 CSS 计数器将节号添加到标题时，我在使用header标签时遇到了问题。

它似乎以某种方式干扰了counter（s）

输出是：

• 第一章
• 1.1。分章
• 1.1。分章
• 1.1。分章
• 1.0.1。子小节

删除header标签后output is as expected：

• 1. 第一章
• 1.1。分章
• 1.2. 分章
• 1.3. 分章
• 1.3.1。子小节

在 H1 周围使用header标签是否会导致这种情况？它在 Firefox 和 Edge 上这样做，而不是在 Chrome 和 Opera 上

我想在 html 和 css 中重新创建以下文本：

到目前为止，没有css，我用html写了：

但是我怎样才能分割1文本的其余部分，使其保持与原始图像相同？

不知道描述问题的正确方法，所以这里是一个JSFiddle。

这里的问题是编号为Para 1.3andPara 1.4是关闭的：当计数器“离开”嵌套标记para的范围时，它不会“重置” 。<section>