為什麼我的嵌套有序列表計數器不能在 HTML 中工作？

HTML 有序列表計數器不起作用

嘗試使用計數器和範圍建立嵌套有序列表時，可能會出現錯誤編號。本文將深入研究該問題，探究原因並提供解決方案。

根本原因

問題源自於「標準化 CSS」設置，該設定會重置列表邊距和填充為零。此預設設定與正確計數器功能所需的樣式衝突。

解決方案

要解決此問題，請停用「規範化 CSS」選項。或者，在主列表元素中包含子列表。以下 CSS 和 HTML 程式碼示範了此修復：

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>

透過停用 CSS 重設或修改 HTML 結構，有序清單計數器將正確運行，顯示預期的編號。

以上是為什麼我的嵌套有序列表計數器不能在 HTML 中工作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！