CSS 如何建立編號如 1.1、1.2、1.3 的嵌套有序清單？

帶巢狀編號的有序列表

CSS 能否產生顯示為1.1、1.2、1.3 而不是預設的1、2的有序列表項，3 個序列？

解決方案使用計數器

要實現此結果，您可以利用CSS 計數器的功能：

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

上面的樣式為每個

初始化一個名為item 的計數器。元素。
1. 元素被設定為顯示為區塊，並且偽元素 :before 新增到每個
2. 中。顯示計數器值，後面接著句點和空格。計數器遞增屬性為每個
3. 遞增計數器。

   範例

   <ol>
     <li>li element
       <ol>
         <li>sub li element</li>
         <li>sub li element</li>
         <li>sub li element</li>
       </ol>
     </li>
     <li>li element</li>
     <li>li element
       <ol>
         <li>sub li element</li>
         <li>sub li element</li>
         <li>sub li element</li>
       </ol>
     </li>
   </ol>

   登入後複製

   使用應用的CSS，此HTML 將依需求呈現具有巢狀編號的清單項目：

   • 1. 離元素
     2. 1.1。子李元素
     3. 1.2。子李元素
     4. 1.3。子裡元素
   • 2. 裡元素
   • 3. 裡元素
     5. 裡元素
     。 。子裡元素
     6. 3.2。子裡元素
   3.3。子李元素

以上是CSS 如何建立編號如 1.1、1.2、1.3 的嵌套有序清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！