[转载+推荐]本文介绍如何使用CSS 3美化有序列表的计数器样式
|
153 |
Code
|
来源
example
- 1
- 2
- 3
- 3.1
- 3.2
- 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)}
}
})