注意:

由于下面留下的一些答案/评论(我同意)，我觉得这个问题太模糊，并没有充分解释我的问题。我整理的时候太匆忙，导致答案不正确，我认错。由于当前的答案和评论，我觉得即使我再次编辑这个问题， future 的观看者也会对页面上的答案/评论感到困惑，除非每个人也都更新它们。因此，我创建了另一个问题来完全澄清我的问题。再次，对于我在这个问题上造成的困惑，我深表歉意。

澄清的问题可以在这里找到:Style an Ordered List like “X.X” based on list start attribute

我正在更新包含政策页面的客户网站。该政策有九个不同的部分，每个部分都有自己的内容。每个部分内都有不同的部分语句，其编号系统应为“x.x”。然而，这在基本 HTML 中并不存在。此外，某些部分内部有各种不同形式的有序列表。

我已经确定我不想以嵌套的方式解决这个问题，也就是说像这样:

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

这是我看过的所有其他答案处理问题的方式。相反，我希望像这样解决它(下面示例的代码)。我想要一个仅显示“x.1、x.2、x.3”的列表，其中“x”取决于该特定列表的起始编号。

<h2>Section 1</h2>
<strong>Heading 1</strong>
<ol class="specialList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
<strong>Heading 2</strong
<ol type="lower-roman">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

<h2>Section 2</h2>
<ol class="specialList">
    <li>
        <ol type="upper-alpha">
            <li>First subitem</li>
            <li>Second subitem</li>
        </ol>
    </li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

<h2>Section 3</h2>
<ol class="specialList">
    <li>First item
        <ol type="circle">
            <li>First subitem</li>
            <li>Second subitem</li>
        </ol>
    </li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

<h2>Section 4</h2>
<ol class="specialList">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

第 1 节

标题
1.1 第一项
1.2 第二项
1.3 第三项

标题 2
我。第一项
二.第二项
三.第三项

第 2 部分

2.1 第一项
A. 第一个子元素
B. 第二分项
2.2 第二项
2.3 第三项

第 3 部分

3.1 第一项
• 第一个子元素
• 第二个子元素
3.2 第二项
3.3 第三项

第 4 节

4.1 第一项
4.2 第二项
4.3 第三项

这样，我可以避免使用嵌套的有序列表，并希望简化问题，尤其是必要的 CSS。这意味着将一些起始值属性硬编码到每个有序列表中，但策略部分不会频繁更改，因此这应该不重要。

我不想使用 JavaScript，因为无论用户的设置如何，客户端都希望它看起来像这样。这些页面是JSP页面，所以如果有办法将其设置为动态生成，那就可以了。

我已经查看了下面的这些链接。虽然它们都是很好的问题，但没有一个回答我的具体问题。第一个处理嵌套的有序列表，而我处理单个有序列表。第二个想法是正确的，但仍然有点不同(有“x.x.x”，而我只想要“x.x”)。

Can Ordered List Produce Results that looks like 1.1?

Achieve sub numbering on ordered list

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

摘要

总之，客户端想要一个从“x.1”开始并尽可能远的列表，其中“x”是特定列表的给定起始值属性。我刚刚跟他们澄清了这件事，这就是这次需求“更新”的原因。基本上，我需要一个类，将列表顶层的编号系统更改为“x.x”格式(同样，第一个“x”是起始值”)。任何子列表(嵌套列表)都不会遵循此格式格式，但将遵循“type”或“list-style”属性指定的另一种格式。

最佳答案

花了一段时间才弄清楚这个!

这是我的fiddle

 h2.title {
   font-size: 20px;
   font-weight: 800;
   margin-left: -20px;
   padding: 12px;
   counter-increment: ordem;
 }
 li.heading {
   font-size: 16px;
   font-weight: bold;
   padding: 12px;
   list-style-type: none;
 }
 .bullet {
   counter-reset: bullet;
   padding-left: 12px;
 }
 .bullet li {
   list-style-type: none;
 }
 .bullet li:before {
   counter-increment: bullet;
   content: counter(ordem)"." counter(bullet)" ";
 }
 ol.none {
   list-style: none!important
 }
 li.s2sub::before {
   counter-increment: none!important;
   content: none!important;
 }
 li.s2sub {
   list-style: upper-alpha;
 }
 li.s3sub::before {
   counter-increment: none!important;
   content: none!important;
 }
 li.s3sub {
   list-style-type: circle;
 }
 li.roman::before {
   counter-increment: none!important;
   content: none!important;
 }
 li.roman {
   list-style: lower-roman inside;
 }

<body>
  <ol>
    <h2 class="title">Section 1</h2> 
    <li class="heading">Heading 1</li>

    <ol class="bullet">
      <li>text 1 one</li>
      <li>text 1 two</li>
      <li>text 1 three</li>
      <li>text 1 four</li>
    </ol>
    <li class="heading">Heading 2</li>

    <ol class="bullet">
      <li class="roman">Item 1</li>
      <li class="roman">Item 2</li>
      <li class="roman">Item 3</li>
    </ol>
    <h2 class="title">Section 2</h2>
    <ol class="bullet">
      <li>First item
        <ol>
          <li class="s2sub">First subitem</li>
          <li class="s2sub">Second subitem</li>
        </ol>
      </li>
      <li>Second Item</li>
      <li>Third Item</li>
    </ol>
    <h2 class="title">Section 3</h2>
    <ol class="bullet">
      <li>First item
        <ol>
          <li class="s3sub">First subitem</li>
          <li class="s3sub">Second subitem</li>
        </ol>
      </li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>
  </ol>
</body>

关于html - 将有序列表设置为 "1.1, 1.2"而不是 "1, 2"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31859932/

html - 将有序列表设置为 "1.1, 1.2"而不是 "1, 2"

注意:

第 1 节

第 2 部分

第 3 部分

第 4 节

摘要

上一篇：html - 无法在 iOS Safari 上滚动嵌入视频

下一篇：html - 为什么在这么多随机的地方都有字符？