html - 如何使用 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 和 低拉丁语)。但是，您可以使用 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>

这并不完全按照您的计划进行，因为二级列表中的所有元素都是十进制，并且所有第三层的元素是 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，我建议您这样做，因为它会为每个级别生成一个代码规则。