如何使用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>

查看/处理JSFiddle：https://jsfiddle.net/cLeayu6f/1/

我该怎么做？ 感谢。

Answer 1

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

＆＃13;

＆＃13;

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) " "; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这并不完全符合您的计划，因为所有二级列表中的元素为decimal，所有元素在第三级是lower-latin。只有当我们现在列表中有多少级别并且需要更多代码时，才能修复此问题。如果我们采取三个级别：

＆＃13;

＆＃13;

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) " "; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如您所见，使用 p 可能性和 n 级别，一个级别的规则是 p ⁿ ，如果有更多的层次或可能性，如果没有更简单的方法，这将是不可能的。但它现在有效。我希望我错过了一些方法来做到这一点。

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