CSS counter: Automatically add the serial number "2" to the list

The list of nested layers is essentially a combination of single-layer lists. The complex hierarchy is made up of a two-tier hierarchy of parent-child relationships. As long as each of the most basic parent-child relationship level is not messy, the composition of the more complex structure will not be chaotic.

The point is:

1, the relationship between the subordinate must be clear, father-son relationship is a father-son relationship, brotherhood is a brotherly relationship.

2, the style of the only change is that the original use counter method, now to use the counters method, the first parameter is the counter name, the second parameter is the interval symbol.

The code is as follows:

<style>ul{counter-reset:num;padding-left:20px;} Li:before{content:counters (num, '. ')   '. '; Counter-increment:num;} </style><ul>    <li> Wang Lu </li>    <li> Wang Dick <ul>    <li> King's elder son </li>    <li> Wang Lao 22 son </li >    <li> Wang Lao two or three son         <ul>                      <li> Wang Lao two or three son's big grandson </li>                     <li> Wang Lao two or three son of two grandson </li>                     <li> Wang Lao two or three sons of three grandchildren </li></ul>    </li></ul>    </li>   &nbSp; <li> Wang Old three <ul>    <li> Wang old three son </li>     <li> Wang Lao 32 sons </li>    <li> Wang Lao 33 sons          <ul>    <li> Wang Lao 33 son's big grandson </li>    <li> Wang Lao 33 son of two grandson </li>    <li> King Old 33 son of three grandson </li></ul>     </li></ul>    </li></ul>

It is not necessary to use UL, Li to build this complex level of directory, but with UL, Li's structure can more clearly remind us of this level of relationship, let us make less mistakes.

Repeating the beginning of this article: no matter how complex the hierarchical relationship, is composed of a stable and simple parent-child relationship . The key to building a complex hierarchy is that every parent-child relationship as the most basic particle cannot be wrong. To ensure the correctness of the structure, with the proprietary style attributes, it is easy to achieve complex mesh structure.

The above UL, Li code, we know that the UL sub-elements can only be Li, but we can also continue to embed in Li's ul, Li structure. However, you can never let UL and Li stand together in a brotherly relationship. An LI element is either a sub-element of the UL, or as the parent element of UL, but must not be a sibling element, UL and Li absolutely not equal. This is the key to the correctness of the complex directory structure, the combination of UL and Li can be very good hints at this point, but if we use other monomer elements, such as div with class method is very much in the construction of complex hierarchical relationship is to ignore this relationship and can not get the desired level of display.

CSS counter: Automatically add the serial number "2" to the list