来源
http://www.html5online.com.cn/series/css3/css313.html
example
- 1
- 2
- 3
- 3.1
- 3.2
- 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
