来源
http://www.html5online.com.cn/series/css3/css313.html
感觉hexo在列表显示这块有点问题 -2024-10-18
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