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. 里元素
     4. 3.1 。子里元素
     5. 3.2。子里元素
     6. 3.3。子李元素

以上是CSS 如何创建编号如 1.1、1.2、1.3 的嵌套有序列表？的详细内容。更多信息请关注PHP中文网其他相关文章！