html - 由于 CSS，订购的罗马数字不起作用

Question

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

1.
   1.1
   1.2
2.
   2.1
   2.2

我让它在小提琴中工作。

小提琴

问题是当我将类型更改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 计数器来显示嵌套编号，并且与 default 不同ol，输出格式不会随type="I"属性而改变。您必须将计数器的输出格式明确设置为罗马数字。默认情况下，输出格式是十进制数字，但该list-style-type属性可用的所有样式也可用于计数器（来源：W3C 规范）。

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

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

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

Answer 2

给你 - 你只需要将你的内容设置为大写罗马。

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