如何使用 type 属性做 html 多元素列表？

Question

我想做一个如下所示的列表：

A. one
   A.1. one-one
        A.1.a. one-one-one
        A.1.b. one-one-two
   B.1. one-two
        B.1.a. one-two-one
        B.1.b. one-two-two
B. two

我们可以只用数字来做到这一点（比如：Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?），但我想使用 type 属性。

<ol type="A">
    <li>one
        <ol>
            <li>one-one
                <ol type="a">
                    <li>one-one-one</li>
                    <li>one-one-two</li>
                </ol>
            </li>
            <li>one-two</li>
                <ol type="a">
                    <li>one-two-one</li>
                    <li>one-two-two</li>
                </ol>
        </ol>
    </li>
    <li>two</li>
</ol>

View/work 在 JSFiddle 上：https://jsfiddle.net/cLeayu6f/1/

我该怎么做？谢谢。

Answer 1

如评论中所述，您不能使用 type 属性执行此操作，并且这些值也是不允许的（upper-latin 和 lower-latin）。但是，您可以使用 data-* 属性和 CSS 属性选择器。如果我们从 this answer 中获取代码，它看起来像这样：

ol { counter-reset: item }
li { display: block }
li:before { counter-increment: item }

ol    > li:before { content: counters(item, ".", decimal    ) " "; }
ol[data-type="A"] > li:before { content: counters(item, ".", upper-latin) " "; }
ol[data-type="a"] > li:before { content: counters(item, ".", lower-latin) " "; }

<ol data-type="A">
    <li>one
        <ol>
            <li>one-one
                <ol data-type="a">
                    <li>one-one-one</li>
                    <li>one-one-two</li>
                </ol>
            </li>
            <li>one-two</li>
                <ol data-type="a">
                    <li>one-two-one</li>
                    <li>one-two-two</li>
                </ol>
        </ol>
    </li>
    <li>two</li>
</ol>

这并不完全按照您的计划进行，因为 all 二级列表中的元素是 decimal，并且 all第三层的元素是lower-latin。这只能在我们现在列表中有多少级别并需要更多代码的情况下才能解决。如果我们取三个级别：

li { display: block }
li:before { counter-increment: levelone }

/* First level */
body > ol { counter-reset: levelone }
body > ol > li:before { counter-increment: levelone }
body > ol   > li:before { content: counter(levelone, decimal    ) " "; }
body > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) " "; }
body > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) " "; }

/* Second level */
body > ol > li > ol { counter-reset: leveltwo }
body > ol > li > ol > li:before { counter-increment: leveltwo }
body > ol   > li > ol    > li:before { content: counter(levelone, decimal    ) "." counter(leveltwo, decimal    ) " "; }
body > ol   > li > ol[data-type="A"] > li:before { content: counter(levelone, decimal    ) "." counter(leveltwo, upper-latin) " "; }
body > ol   > li > ol[data-type="a"] > li:before { content: counter(levelone, decimal    ) "." counter(leveltwo, lower-latin) " "; }
body > ol[data-type="A"] > li > ol    > li:before { content: counter(levelone, upper-latin) "." counter(leveltwo, decimal    ) " "; }
body > ol[data-type="A"] > li > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) "." counter(leveltwo, upper-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="a"] > li:before { content: counter(levelone, upper-latin) "." counter(leveltwo, lower-latin) " "; }
body > ol[data-type="a"] > li > ol    > li:before { content: counter(levelone, lower-latin) "." counter(leveltwo, decimal    ) " "; }
body > ol[data-type="a"] > li > ol[data-type="A"] > li:before { content: counter(levelone, lower-latin) "." counter(leveltwo, upper-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) "." counter(leveltwo, lower-latin) " "; }

/* Third level */
body > ol > li > ol > li > ol { counter-reset: levelthree }
body > ol > li > ol > li > ol > li:before { counter-increment: levelthree }
body > ol   > li > ol    > li > ol     > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, decimal    ) "." counter(levelthree, decimal    ) " "; }
body > ol   > li > ol    > li > ol[data-type="A"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, decimal    ) "." counter(levelthree, upper-latin) " "; }
body > ol   > li > ol    > li > ol[data-type="a"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, decimal    ) "." counter(levelthree, lower-latin) " "; }
body > ol   > li > ol[data-type="A"] > li > ol     > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, upper-latin) "." counter(levelthree, decimal    ) " "; }
body > ol   > li > ol[data-type="A"] > li > ol[data-type="A"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, upper-latin) "." counter(levelthree, upper-latin) " "; }
body > ol   > li > ol[data-type="A"] > li > ol[data-type="a"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, upper-latin) "." counter(levelthree, lower-latin) " "; }
body > ol   > li > ol[data-type="a"] > li > ol     > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, lower-latin) "." counter(levelthree, decimal    ) " "; }
body > ol   > li > ol[data-type="a"] > li > ol[data-type="A"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, lower-latin) "." counter(levelthree, upper-latin) " "; }
body > ol   > li > ol[data-type="a"] > li > ol[data-type="a"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, lower-latin) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="A"] > li > ol    > li > ol     > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="A"] > li > ol    > li > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="A"] > li > ol    > li > ol[data-type="a"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="A"] > li > ol     > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="A"] > li > ol[data-type="A"] > li > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="A"] > li > ol[data-type="a"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="a"] > li > ol     > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="A"] > li > ol[data-type="a"] > li > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="a"] > li > ol[data-type="a"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="a"] > li > ol    > li > ol     > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="a"] > li > ol    > li > ol[data-type="A"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="a"] > li > ol    > li > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="A"] > li > ol     > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="a"] > li > ol[data-type="A"] > li > ol[data-type="A"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="A"] > li > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="a"] > li > ol     > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="a"] > li > ol[data-type="a"] > li > ol[data-type="A"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="a"] > li > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, lower-latin) " "; }

<ol data-type="A">
    <li>one
        <ol>
            <li>one-one
                <ol data-type="a">
                    <li>one-one-one</li>
                    <li>one-one-two</li>
                </ol>
            </li>
            <li>one-two
                <ol data-type="a">
                    <li>one-two-one</li>
                    <li>one-two-two</li>
                </ol>
     </li>
        </ol>
    </li>
    <li>two</li>
</ol>

如您所见，有 p 种可能性和 n 级，一级的规则是 pⁿ，所以有更多的层次或可能性，如果没有更简单的方法，这是不可能的。但它现在有效。我希望我缺少一些方法来做到这一点。

还有一件事：如果您可以预定义哪个 list-style-type，我建议您这样做，因为它会为每个级别生成一条代码规则。

如何使用 type 属性做 html 多元素列表？

How can I do html multi elements list with type attribute?

html

css

types

element

html-lists