Serialized directory listing

This time I will bring you a directory list with a serial number, and implement a directory list with a serial number. Notes What are the following? Let’s take a look at the actual case.

When writing a document manual, we often need the serial number in front of the list item and the serial number of the superior layer in front, as shown below:

(Figure 1)

But in the default

list, any level starts with a single serial number. As shown below:

(Picture 2)



To achieve the effect of Figure 1, one of the methods is to directly use the serial number part as part of the list content and insert the corresponding HTML, you can use js to insert serial numbers in batches.

The generated HTML result is similar to this

<ol>  
  <li>1. 列表项  
    <ol>  
      <li>1.1. 列表项  
        <ol>  
          <li>1.1.1 列表项</li>  
          <li>1.1.2 列表项</li>  
          <li>1.1.3 列表项</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>


If you neither want to hard-write the serial number in the html code nor introduce js, you can only use HTML attributes## Breakthroughs were made in both # and CSS.

Unfortunately,

HTML element attributes do not provide a similar interface.

After a tip from a netizen, I learned that there is a concept called css counter, but I am ignorant.
After querying the relevant documents, the CSS solution will be available.
HTML code is as follows:

<ol>  
  <li>列表项  
    <ol>  
      <li>列表项  
        <ol>  
          <li>列表项</li>  
          <li>列表项</li>  
          <li>列表项</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

CSS code is as follows:

ol {padding:0 0 0 20px;margin:0;list-style:none;}  
li:before {color:#f00; font-family:Times New Roman;}  
li{counter-increment:a 1;}  
li:before{content:counter(a)". ";}  
li li{counter-increment:b 1;}  
li li:before{content:counter(a)"."counter(b)". ";}  
li li li{counter-increment:c 1;}  
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}

The effect is Figure 1 at the beginning of this article.
But this CSS is really ugly. There are several levels of directories, so you have to write several layers of CSS. Obviously it shouldn't be like this.
After continuing to read the relevant documents and clarifying counter-reset, counter(), counters(), I found that the problem was extremely simple.
The CSS code is as follows:

ol {padding:0 0 0 20px;margin:0;list-style:none;counter-reset:a;}  
li:before {counter-increment:a;content:counters(a,".")". ";}

In this way, no matter how many levels of nested lists there are, the cascading sequence numbers can be displayed correctly, and the effect is as shown in Figure 1 at the beginning of this article.

It should be pointed out that: before, counter-increment and other related CSS features do not support the ancient IE6/IE7, but IE8 and above are well supported.


I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:

What is the difference between href and src, link and @import


How is the absolute positioning of css compatible? All resolutions


CSS3 properties transition, animation, transform

The above is the detailed content of Serialized directory listing. For more information, please follow other related articles on the PHP Chinese website!