Question

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

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

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

我在开发人员控制台中包括一张表格的图片。如您所见，每个项目都有一个 toc级类，然后是一个 number 。

“主标题” 的级别为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打开和关闭编号。

如何使用CSS为自定义目录编号？

1 个答案: