【问题标题】：Style an Ordered List like "1.1, 1.2" instead of "1, 2"将有序列表设置为“1.1, 1.2”而不是“1, 2”
【发布时间】：2015-08-06 15:32:35
【问题描述】：

注意：

由于下面留下了一些答案/cmets（我同意），我觉得这个问题太模糊了，并没有充分解释我的问题。我整理的时候太着急了，所以导致了错误的答案，对此我接受错误。由于当前的答案和 cmets，我觉得即使我再次编辑这个问题，未来的观众也会被页面上的答案 / cmets 弄糊涂，除非每个人都更新它们。正因为如此，我创建了另一个完全澄清我的问题的问题。再次，对于我在这个问题上造成的混乱，我深表歉意。

澄清的问题可以在这里找到：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
一世。第一项
ii.第二项
iii.第三项

第 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”是起始值“）。任何子列表（嵌套列表）都不会遵循这个格式，但将遵循“类型”或“列表样式”属性指定的另一种格式。

【问题讨论】：

能否请您展示您的尝试。
可能重复 - stackoverflow.com/questions/30787024/…
@Paulie_D 它不是重复的原因是这个人需要一个能够走多层的数字（即“x.x.x”），而我只想要一个可以走的数字到“x.x”。
这就是我说可能重复的原因。我怀疑同样的技术也会适用。
我已经让它工作了，看看我编辑的答案你必须使用 sub lis

标签： html css list html-lists

【解决方案1】：

花了一些时间才弄清楚这个！

这是我的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>

【讨论】：

我尝试过“计数器”，但没有任何成功。我很快就会用我尝试过的方法更新我的问题。
@RachelGallen 请参阅更新以进行澄清。我删除了部分标题中的数字，希望能澄清客户的要求。谢谢！

【解决方案2】：

我让它像这样工作：

body{
    counter-reset: section children;  
}
li{
    list-style:none;
}
.parent::before {
  counter-increment: section;  
  content: counter(section) " - ";
}
.parent li:first-child{
    counter-reset:children;
}
.parent li::before{
    counter-increment: children;  
    content: counter(section) "." counter(children) " - ";
 }

<ol>
    <li class="parent">Section 1
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
    <li class="parent">Section 2
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>

</ol>

我删除了列表样式，因为它不是必需的。
这样做是为子项和节创建两个单独的计数器，然后在每个新节上重置子项计数器。

JSFiddle Demo

【讨论】：

我可能没有完全阐明我想要什么。我将不得不再次更新。此时我不想使用嵌套列表，因为它会导致网站（大型企业网站）上现有样式出现问题。正因为如此，我只想要一个可以应用于列表的类，它会导致它使用“x.x”编号而不是“x”。
@KendallRoth 你能举个例子吗？
我上传的第二个 JSFiddle 有示例 HTML...我完全知道其中的 CSS 是错误的 :)
我再次更新了我的问题...对于之前的困惑，我深表歉意。我已经从部分标题中删除了数字，因为这应该使它更清晰一些。如果不是这种情况，请告诉我。谢谢