jquery - 如何使用 css 对自定义目录进行编号？

Question

我目前正在使用 Javascript 基于我的 HTML 动态创建目录。

我想为用户提供的选项之一是，当他们创建目录时，他们是否要使用在我的 JS 或 CSS 编号中创建的编号.

我的 JS 编号工作正常，但我的 CSS 编号不。 因为我没有使用 ol 或 li 创建我的列表，所以很难用 CSS 选择和编号我的表格。

我在开发控制台中包含了一张我的 table 的图片。如您所见，每个元素都有一个 toc-level 类，然后是一个 number。

"main-headings" 的级别为 1，"sub-headings" 的级别为 2，等等。我尝试使用 CSS 计数器来执行此任务，但是我不确定如何正确实现它。我希望 1、1.1、1.2、1.2.1 等编号>“主标题” 和 “副标题”。

有没有人有任何想法如何做到这一点？

非常感谢。

更新:

我发现这个 CSS 有帮助，但它无法像我的 3 级标题那样对子标题进行编号:

.show-css-numbering {
        counter-reset: heading;
    }

    .toc-level-1:before {
        content: counter(heading)") ";
        counter-increment: heading;
    }

    .toc-level-1 {
        counter-reset: subheading;
    }

    .toc-level-2:before {
        content: counter(heading)"." counter(subheading)") ";
        counter-increment: subheading;
    }

Answer 1

我使用以下格式的 css 来回答我的问题:

   .show-css-numbering {
            counter-reset: heading;
        }

        .toc-level-1:before {
            content: counter(heading)") ";
            counter-increment: heading;
        }

        .toc-level-1 {
            counter-reset: subheadingLVL2;
        }

        .toc-level-2:before {
            content: counter(heading)"." counter(subheadingLVL2)") ";
            counter-increment: subheadingLVL2;
        }

        .toc-level-2 {
            counter-reset: subheadingLVL3;
        }

        .toc-level-3:before {
            content: counter(heading)"." counter(subheadingLVL2)"." counter(subheadingLVL3)") ";
            counter-increment: subheadingLVL3;
        }

        .toc-level-3 {
            counter-reset: subheadingLVL4;
        }

        .toc-level-4:before {
            content: counter(heading)"." counter(subheadingLVL2)"." counter(subheadingLVL3)"." counter(subheadingLVL4)") ";
            counter-increment: subheadingLVL4;
        }

        .toc-level-4 {
            counter-reset: subheadingLVL5;
        }

        .toc-level-5 {
            content: counter(heading)"." counter(subheadingLVL2)"." counter(subheadingLVL3)"." counter(subheadingLVL4)"." counter(subheadingLVL5)") ";
            counter-increment: subheadingLVL5;
        }

        .toc-level-5 {
            counter-reset: subheadingLVL6;
        }

        .toc-level-6 {
            content: counter(heading)"." counter(subheadingLVL2)"." counter(subheadingLVL3)"." counter(subheadingLVL4)"." counter(subheadingLVL5)"." counter(subheadingLVL6)") ";
            counter-increment: subheadingLVL6;
        }

这会生成一个包含正确编号的子标题和标题的列表。一直到第 6 级子标题。之后，您还可以在所有选择器前面包含 .show-css-numbering，以便可以根据需要使用 Jquery 打开和关闭编号.