HTML嵌套計數器和作用域導致有序列表1.1,1.2無法正常運作
P粉704066087
P粉704066087 2023-08-21 22:36:53
0
2
466
<p>我使用聖誕老人和作用域來建立社群清單:</p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>ol { 計數器重置:項目; 左內邊距:10px; } 李{ 顯示:區塊 } 李:之前{ 內容:計數器(項目,“。”)“”; 反增量:項目 }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><ol> <li>一</li> <li>兩個</li> <ol> <li>二.一</li> <li>二.二</li> <li>二.三</li> </ol>
  • <ol>
  • 三.一
  • 三.二
  • <ol>
  • 三.二.一
  • 三.二.二
  • </ol> </ol> <li>四</li> </ol></code></pre> <p><br />></p> <p>我所期望的結果如下:</p>
    1.一
    2. 兩個
      2.1.二.一
      2.2.二.二
      2.3.二三
    3. 三
      3.1 三.一
      3.2 三.二
        3.2.1 三.二.一
        3.2.2 三.二.二
    4. 四</pre>
    <p>但實際上,我看到的是<strong>(錯誤的編號)</strong>:</p>
    
    <程式碼>1.一
    2. 兩個
      2.1.二.一
      2.2.二.二
      2.3.二三
    2.4 三
      2.1 三.一
      2.2 三.二
        2.2.1 三.二.一
        2.2.2 三.二.二
    2.3 四
    </代號></pre>
    <p>我不知道,有發現哪裡出錯了嗎?</p>
    <p>這是一個JSFiddle連結:http://jsfiddle.net/qGCUk/2/</p>            
    P粉704066087
    P粉704066087

    全部回覆(2)
    P粉764836448

    使用這個樣式只改變巢狀清單:

    ol {
        counter-reset: item;
    }
    
    ol > li {
        counter-increment: item;
    }
    
    ol ol > li {
        display: block;
    }
    
    ol ol > li:before {
        content: counters(item, ".") ". ";
        margin-left: -20px;
    }
    P粉141911244

    取消勾選「標準化CSS」 - http://jsfiddle.net/qGCUk/3/ 在此中使用的CSS重置將所有清單的邊距和填充設定為0

    更新 http://jsfiddle.net/qGCUk/4/ - 您必須在主要的<li>中包含您的子列表

    ol {
      counter-reset: item
    }
    li {
      display: block
    }
    li:before {
      content: counters(item, ".") " ";
      counter-increment: item
    }
    <ol>
      <li>one</li>
      <li>two
        <ol>
          <li>two.one</li>
          <li>two.two</li>
          <li>two.three</li>
        </ol>
      </li>
      <li>three
        <ol>
          <li>three.one</li>
          <li>three.two
            <ol>
              <li>three.two.one</li>
              <li>three.two.two</li>
            </ol>
          </li>
        </ol>
      </li>
      <li>four</li>
    </ol>
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板