Question

我一直在寻找一种方法来创建一个带有这样的数字的嵌套有序列表

我让它在小提琴中工作。

Fiddle

问题是，当我将ol的类型更改为罗马数字type="I"时，由于我添加的CSS，它无法正常工作。

    <ol type="I">
    <li>Elemento primero
        <ol type="I">
            <li>Subelemento primero</li>
            <li>Subelemento segundo</li>
        </ol>
    </li>
    <li>elemento segundo</li>
</ol>
    <ol type="I">
        <li>Subelemento primero</li>
        <li>Subelemento segundo</li>
    </ol>

CSS：

OL {
    counter-reset: item
}
LI {
    display: block
}
LI:before {
    content: counters(item, ".")" ";
    counter-increment: item
}

Answer 1

您正在使用CSS计数器显示嵌套编号，与默认ol不同，输出格式不会随type="I"属性而更改。您必须明确将计数器的输出格式设置为罗马数字。默认情况下，输出格式为十进制数字，但list-style-type属性可用的所有样式也可用于计数器（源：W3C Spec）。

这可以通过将upper-roman（相当于type="I"）或lower-roman（相当于type="i"）作为参数值之一传递给{{1}来实现}或counters()函数。

counter()

OL {
  counter-reset: item
}
LI {
  display: block
}
LI:before {
  content: counters(item, ".", upper-roman)" ";
  counter-increment: item;
}

Answer 2

在这里 - 你只需要将你的内容设置为上罗马。

OL {
    counter-reset: section;
}
LI {
    display: block;
    counter-reset: number;
}
LI:before {
    counter-increment: section;
    content: "Section " counter(section, upper-roman) ". ";
}

因为CSS，有序的罗马数字不起作用

2 个答案: