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

  • ~3.16K 字
  • 次阅读

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

感觉hexo在列表显示这块有点问题 -2024-10-18

example

  1. 1
  2. 2
  3. 3
  4. 3.1
  5. 3.2
  6. 4

个人对代码有调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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列表代码进行修正

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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)}
}
})

老博客有用,但是新博客因为li里不带p所以大概有点问题,后续有空改吧 -2021-0821
https://www.cnblogs.com/dragonir/p/14475600.html

打赏
打赏提示信息
分享
分享提示信息