微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – 如何让`ol`元素显示在外国字母表中?

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.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐