CSS巢列表 - 如何款

我想列出羅威納和杜賓像1.1和1.2的列表，但我不知道該怎麼做。我複製了該CSS列表模板並進行了一些修改。下面是代碼：

#lista2 { 
 
    counter-reset: li; 
 
    list-style: none; 
 
    *list-style: decimal; 
 
    font: 15px 'trebuchet MS', 'lucida sans'; 
 
    padding: 0; 
 
    margin-bottom: 4em; 
 
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
 
} 
 

 
#lista2 ol { 
 
    margin: 0 0 0 2em; 
 
    counter-reset: section;    
 
    \t list-style-type: none; 
 
} 
 

 
#lista2 li{ 
 
    position: relative; 
 
    display: block; 
 
    padding: .4em .4em .4em 2em; 
 
    *padding: .4em; 
 
    margin: .5em 0; 
 
    background: #ddd; 
 
    color: #444; 
 
    text-decoration: none; 
 
    border-radius: .3em; 
 
    transition: all .3s ease-out; 
 

 
} 
 

 
#lista2 li:hover{ 
 
    background: #eee; 
 
} 
 

 
#lista2 li:hover:before{ 
 
    transform: rotate(360deg); 
 
} 
 

 
#lista2 li:before{ 
 
    content: counter(li); 
 
    counter-increment: li; 
 
    position: absolute; 
 
    left: -1.3em; 
 
    top: 50%; 
 
    margin-top: -1.3em; 
 
    background: #87ceeb; 
 
    height: 2em; 
 
    width: 2em; 
 
    line-height: 2em; 
 
    border: .3em solid #fff; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    border-radius: 2em; 
 
    transition: all .3s ease-out; 
 
} 
 

 
#lista2 ol ol li:before{ 
 
\t counter-increment: li; 
 
    content: counters(li,".") " "; 
 
} 
 
#lista2 ol { 
 
    counter-reset: li; 
 
    list-style: none; 
 
}

<ol id="lista2"> 
 
    <li>Animals 
 
\t \t \t <ol> 
 
\t \t \t \t <li>Dogs</li> 
 
\t \t \t \t \t <ol> 
 
\t \t \t \t \t \t <li>Rottweiler</li> 
 
\t \t \t \t \t \t <li>Doberman</li> 
 
\t \t \t \t \t </ol> 
 
\t \t \t \t <li>Cats</li> 
 
\t \t \t \t <li>Cacatoos</li> 
 
\t \t \t \t </ol> 
 
\t \t </li> 
 
</ol>

我希望有人能夠幫助我。謝謝！

來源

2017-05-07 Eduardo moreno

Plunkr鏈接 - https://plnkr.co/edit/dtn5xgoOOoSmVc4B3LrH?p=preview

HTML：

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
     <style> 
    OL { counter-reset: item } 
    LI { display: block } 
    LI:before { content: counters(item, ".") " "; counter-increment: item } 
    </style> 
    </head> 

<body> 
<ol> 
    <li>Dogs 

    <ol> 
    <li>Rottweiler</li> 
    <li>Doberman</li> 

    </ol> 
</li> 
    <li>Cats 
    </li> 
    <li>Cacatoos</li> 
    </ol> 

    </body> 

</html>

CSS：

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

來源

2017-05-07 19:00:19

，謝謝，我只需要改變一下我的HTML列表拿到狗在正確的位置 –

CSS巢列表 - 如何款

回答

相關問題