将有序列表的样式设置为“ 1.1、1.2”而不是“ 1、2”

Question

注意：

由于下面有一些答案/评论（我同意），我觉得这个问题太含糊，不能充分解释我的问题。 当我将它们放在一起时，我太着急了，这导致了错误的答案，对此我可以接受。 由于当前的答案和评论，我觉得即使我再次编辑此问题，除非将来每个人也都对其进行更新，否则将来的观众会对页面上的答案/评论感到困惑。 因此，我创建了另一个问题，可以完全阐明我的问题。 同样，对于在这个问题上引起的困惑，我深表歉意。

可以在这里找到经过澄清的问题：根据列表开始属性设置有序列表的样式，例如“ XX”

我正在更新包含策略页面的客户网站。 该政策包含9个不同的部分，每个部分都有各自的内容。 每个部分的内部都有不同的部分语句，应使用“ xx”的编号系统。 但是，这在基本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.2第二项
1.3第三项

标题2
一世。 第一项
II。 第二项
III。 第三项

第二节

2.1第一项
A.第一个子项目
B.第二个子项目
2.2第二项
2.3第三项

第三节

3.1第一项
•第一个子项目
•第二个子项目
3.2第二项
3.3第三项

第4节

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

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

我不希望使用JavaScript，因为无论用户的设置如何，客户端都希望它具有这种外观。 这些页面是JSP页面，因此，如果有一种方法可以将其设置为动态生成，则可以接受。

我已经在下面查看了这些链接。 尽管它们是非常好的问题，但他们都没有回答我的特定问题。 第一个处理嵌套的有序列表，而我处理单个有序列表。 第二个是正确的想法，但还是有点不同（具有“ xxx”，而我只希望“ xx”）。

订购清单能否产生看起来像1.1的结果？

在有序列表上实现子编号

请让我知道是否需要澄清！ 谢谢！

摘要

总之，客户需要一个列表，该列表将从“ x.1”开始，并根据需要走得更远，其中“ x”是特定列表的给定起始值属性。 我刚刚与他们澄清了这个问题，这就是需求“更新”的原因。 基本上，我需要一个将列表的顶级编号系统更改为“ xx”格式的类（同样，第一个“ x”是起始值”）。任何子列表（嵌套列表）都不会跟随此格式，但将遵循“类型”或“列表样式”属性指定的另一种格式。

Answer 1

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

这是我的小提琴

  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>

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

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

将有序列表的样式设置为“ 1.1、1.2”而不是“ 1、2”

问题描述

注意：

第一节

第二节

第三节

第4节

摘要

2 个解决方案

解决方案1
2 2015-08-06 15:42:03

解决方案2
1 2015-08-06 15:58:23

JSFiddle演示

将有序列表的样式设置为“ 1.1、1.2”而不是“ 1、2”

问题描述

注意：

第一节

第二节

第三节

第4节

摘要

2 个解决方案

解决方案1 2 2015-08-06 15:42:03

解决方案2 1 2015-08-06 15:58:23

JSFiddle演示

解决方案1
2 2015-08-06 15:42:03

解决方案2
1 2015-08-06 15:58:23