Take&Give

menu icon

[转载+推荐]本文介绍如何使用CSS 3美化有序列表的计数器样式

| 55 | Code | CSS WWW 转载

来源
 http://www.html5online.com.cn/series/css3/css313.html

example

  1. 1
  2. 2
  3. 3
    1. 3.1
    2. 3.2
  4. 4

个人对代码有调整 

ol{
    counter-reset: li; /* 初始化计数器 */
    list-style: none; /* 移除浏览器默认编号 */
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    padding-bottom: 10px;
    font-size: 14px;
}

ol ol{
    padding-bottom: 0px;
}

ol ol>li:first-of-type>p{
    margin-top: 0px !important;
}

ol ol>li:last-of-type>p{
    margin-bottom: 0px !important;
}

ol>li>p:first-of-type{
    position: relative;
    padding: .2em 1.3em;
    *padding: .4em;
    min-height: 31px;
    margin: .5em 0;
    color: #444;
    background:#eee;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;   
}

ol>li>p:first-of-type:hover:before{
    transform: rotate(360deg);  
}

ol>li>p:first-of-type: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;
}

在本博客中，用了以下脚本对原生的ol列表代码进行修正 

lis=document.querySelectorAll('ol>li');
[].forEach.call(lis,function(li){
    if(li.firstChild.nodeName=="#text"||getComputedStyle(li.firstChild).display=="inline"){
        p=document.createElement('p');
        if(li.firstChild.nodeName=="#text")p.innerHTML=li.firstChild.textContent;
        else p.innerHTML=li.firstChild.outerHTML;
        $(li.childNodes[0]).remove();
        if(li.firstChild){
            li.insertBefore(p,li.firstChild)
        }
        else li.appendChild(p);
    }
    else if (li.firstChild.nodeName!="P"&&getComputedStyle(li.firstChild).display=="block"){
        p=document.createElement('p');
        if(li.firstChild){li.insertBefore(p,li.firstChild)}
    }
})
Newer