html - 根据列表开始属性设计一个有序列表，如 "X.X"

Question

我想为客户设置这样的有序列表样式，但不确定具体如何设置。客户希望有一个包含多个部分的政策页面。每个部分都有几个语句，编号如下:“x.1，x.2”(其中“x”取决于部分编号)。以下是这些部分的 HTML 格式:

<div class="customListBox">
    <h2>Section 1</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>

    <h2>Section 2</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
</div>

这是最终应该显示的内容:

---

第 1 部分

1.1 元素1
1.2 元素2
1.3 元素3

第 2 部分

2.1 元素1
2.2 元素2

---

我已经查看了其他几个问题，但几乎所有问题都涉及嵌套列表，我希望远离，因为这会导致其他网站样式出现问题。我知道 CSS 计数器，但不确定是否可以在没有嵌套列表的情况下使用它们。此外，该页面是一个动态 JSP 页面，因此如果有一种方法可以在 JSP 中执行此操作，那就足够了。

我的相关问题给出了元素的整个范围......我认为它太不清楚了，所以我从准系统代码开始这个问题。我觉得即使我编辑了另一个，页面上的其他答案和评论(由我的第一个和非常不清楚的问题引起)可能会让 future 的访问者感到困惑。 Style an Ordered List like "1.1, 1.2, 1.3"

本题类似，但涉及嵌套列表，由于现有样式，我需要避免。另外，我不想要“x”数字或“x.x.x”数字；我只想要“x.x”数字。 Can ordered list produce result like "1, 1.2, 1.3"?

如果我需要澄清任何事情，请告诉我!

Answer 1

您可以使用 CSS Counters和 counter-increment声明。

编辑:更新代码段以使用类名并调整伪元素定位。

编辑 2:更新代码段以仅针对第一级列表项。

 /* Whatever your defaults are */
ol {
  list-style-type:upper-alpha;
  position:relative;
}

/* Targets only .customListBox's first level child ol elements */
.customListBox > ol { 
    counter-increment: lists;
    counter-reset: items;
    list-style-type: none;
}

 /* Targets only the first level child li elements of the first ol's in .customListBox*/
.customListBox > ol > li::before {
    content: counters(lists, "", decimal) "." counters(items, "", decimal) " ";
    counter-increment: items;
    position:absolute;
    left: 0;
}

<div class="customListBox">
  <h2>Section 1</h2>
  <ol>
    <li>Item</li>
    <li>Item
      <ol>
        <li>Sub Item</li>
        <li>Sub Item</li>
        <li>Sub Item</li>
      </ol>
    </li>
    <li>Item</li>
  </ol>

  <h2>Section 2</h2>
  <ol>
    <li>Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ol>
</div>