Sup*_*tar 3 html css styles html-lists
据我所知,无论list-style-type你设置什么属性,分隔列表的数字或字母后面都会跟一个句点(.).有没有办法将其更改为,例如,右括号()),甚至完全删除它？
这是不正确的CSS显示我想要做的事情:
<HTML>
<HEAD>
<STYLE>
OL{
list-style-type:decimal;
list-style-punctuation: ')';
}
OL.onlyNumbers{
list-style-punctuation: none;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI>Won</LI>
<LI>Too</LI>
<LI>Tree</LI>
<LI>Fore</LI>
<LI VALUE=100>Won Hun Dread</LI>
</OL>
<OL CLASS=onlyNumbers>
<LI>Won</LI>
<LI>Too</LI>
<LI>Tree</LI>
<LI>Fore</LI>
<LI VALUE=100>Won Hun Dread</LI>
</OL>
</BODY>
</HTML>
以下是我想在浏览器中看到的内容:
1) Won
2) Too
3) Tree
4) Fore
100) Won Hun Dread
1 Won
2 Too
3 Tree
4 Fore
100 Won Hun Dread
我不希望任何与jQuery或JavaScript有关的事情.我希望它尽可能接近正确的HTML 5和CSS 3.
您可以使用before伪元素和CSScounter功能.
body {
counter-reset:withBrackets;
counter-reset:onlyNumbers;
}
ol {
list-style:none;
}
ol:not(.onlyNumbers) li {
counter-increment:withBrackets;
}
ol:not(.onlyNumbers) li:before {
content:counter(withBrackets) ") ";
}
ol.onlyNumbers li {
counter-increment:onlyNumbers;
}
ol.onlyNumbers li:before {
content:counter(onlyNumbers) " ";
}
查看工作演示