HTML ol元素可以使用type =“a”属性显示项目的字母列表.不幸的是,该列表始终是英文的.
我需要该列表在威尔士语中,其字母表略有不同(a,b,c,ch,d,dd,…).
<html lang="cy" ng-app="app">
解决方法
这是css解决方案：
body {
font-family: Arial,sans-serif;
}
.welsch {
list-style: none;
}
.welsch li:before {
display: inline-block;
position: absolute;
left: 20px;
width: 20px;
text-align: right;
}
.welsch li:nth-child(29n+1):before {
content:"a.";
}
.welsch li:nth-child(29n+2):before {
content:"b.";
}
.welsch li:nth-child(29n+3):before {
content:"c.";
}
.welsch li:nth-child(29n+4):before {
content:"ch.";
}
.welsch li:nth-child(29n+5):before {
content:"d.";
}
.welsch li:nth-child(29n+6):before {
content:"dd.";
}
.welsch li:nth-child(29n+7):before {
content:"e.";
}
.welsch li:nth-child(29n+8):before {
content:"f.";
}
.welsch li:nth-child(29n+9):before {
content:"ff.";
}
.welsch li:nth-child(29n+10):before {
content:"g.";
}
.welsch li:nth-child(29n+11):before {
content:"ng.";
}
.welsch li:nth-child(29n+12):before {
content:"h.";
}
.welsch li:nth-child(29n+13):before {
content:"i.";
}
.welsch li:nth-child(29n+14):before {
content:"j.";
}
.welsch li:nth-child(29n+15):before {
content:"l.";
}
.welsch li:nth-child(29n+16):before {
content:"ll.";
}
.welsch li:nth-child(29n+17):before {
content:"m.";
}
.welsch li:nth-child(29n+18):before {
content:"n.";
}
.welsch li:nth-child(29n+19):before {
content:"o.";
}
.welsch li:nth-child(29n+20):before {
content:"p.";
}
.welsch li:nth-child(29n+21):before {
content:"ph.";
}
.welsch li:nth-child(29n+22):before {
content:"r.";
}
.welsch li:nth-child(29n+23):before {
content:"rh.";
}
.welsch li:nth-child(29n+24):before {
content:"s.";
}
.welsch li:nth-child(29n+25):before {
content:"t.";
}
.welsch li:nth-child(29n+26):before {
content:"th.";
}
.welsch li:nth-child(29n+27):before {
content:"u.";
}
.welsch li:nth-child(29n+28):before {
content:"w.";
}
.welsch li:nth-child(29n+29):before {
content:"y.";
}
<ol class="welsch"> <li>HTML</li><li>ASP</li><li>CSS</li><li>JavaScript</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>CSS</li><li>JavaScript</li><li>HTML</li><li>ASP</li><li>CSS</li><li>JavaScript</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li><li>HTML</li><li>ASP</li><li>JavaScript</li><li>CSS</li> </ol>
也在Fiddle.
