logo标签列表

如何使用type属性创建HTML多元素列表？

htmlcsstypeshtml-listselement
3
我想要一个看起来像这样的列表：
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

我们可以仅使用数字来完成这个任务（例如：有没有办法使用CSS使有序列表的结果看起来像1.1、1.2、1.3（而不是只有1、2、3……）？），但我想使用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/

我该如何做到这一点？ 谢谢。

不可能使用 type 属性。它不是这样工作的。- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ol - Paulie_D
1个回答
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>

这并不完全按照您的计划工作，因为第二级列表中的所有元素都是十进制，而第三级中的所有元素都是小写拉丁字母。只有知道列表中有多少级，并编写更多代码，才能解决此问题。如果我们有三个级别： 

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>

如您所见，对于一个级别的规则，有 pn 种可能性和 n 个级别，因此如果有更多级别或可能性，则没有更简单的方法。但是现在它可以工作。我希望我错过了某种方法。
还有一件事：如果您可以预定义 list-style-type，我建议这样做，因为每个级别只需要一条代码规则。
谢谢你的回答。我的图层很多，所以这种方法对我来说非常不实用。+哭 我认为这个功能应该已经被支持了。 - Mert S. Kaplan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接