Question

我在html中有一个三级有序列表，我想给出如下样式：

1. Item 1
1.1 Item 2
1.1.1 Item 3

html的一个例子是下一个plunker：

http://plnkr.co/edit/DqhZ5pJILTUHGSNaA1vm?p=preview

我已经在互联网上推荐了一种类似

的CSS

ol { counter-reset: item }
li:before { content: counters(item, "."); counter-increment: item }

但它似乎没有用。

请相关的任何评论都会有很大的帮助。

Answer 1

使用以下代码：

HTML：

 <ol>
    <li> Should be Item 1        
      <ol>
        <li> Should be Item 1.1</li>
        <li> Should be Item 1.2</li>
        <li> Should be Item 1.3
          <ol>
            <li> Should be Item 1.3.1
          </ol>
        <li>Should be Item 1.4</li> 
      </ol> 
    </li>
    <li> Should be Item 2</li> 
    </ol>

的CSS：

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

Answer 2

您的css代码几乎没问题，请参阅http://plnkr.co/edit/wmGhz7V6CKqZ7MmHIoDF?p=preview

在第1级后你有一个额外的</li><li>，所以你的标记就变成了

<ol>
    <li> Should be Item 1
       <ol>
           <li> Should be Item 1.1</li>
           <li> Should be Item 1.2</li>
           <li> Should be Item 1.3
               <ol>
                   <li> Should be Item 1.3.1</li>
               </ol>
           </li>
           <li>Should be Item 1.4</li> 
       </ol> 
    </li>
    <li> Should be Item 2</li> 
 </ol>

在我的css中，我删除了ol的基本列表样式list-style: none;

三级十进制有序列表CSS

2 个答案: