將有序列表的樣式設置為“ 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