根据列表开始属性将有序列表设置为 "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 中有一种方法可以做到这一点。

我的相关问题给出了项目的整个范围......我认为它太不清楚了，所以我从准系统代码开始这个问题。我觉得即使我编辑了另一个，页面上的其他答案和评论（由我的第一个和非常不清楚的问题引起）可能会让未来的访问者感到困惑。 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 and the counter-increment 声明。

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

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

根据列表开始属性将有序列表设置为 "X.X"

Style an Ordered List like "X.X" based on list start attribute

html

css

html-lists

第 1 部分

第 2 部分