Fatal编程技术网
  • html/
  • Html OL中周期的纯CSS替换>；黎族元素

Html OL中周期的纯CSS替换>；黎族元素

html css

Html OL中周期的纯CSS替换>；黎族元素,html,css,styles,html-lists,Html,Css,Styles,Html Lists,据我所知，无论您设置了什么列表样式类型属性，分隔列表的数字或字母后面都会有一个句点（）有没有办法把它改成右括号（）），或者干脆把它全部删除？ 概念 以下是我想做的事情： <HTML> <HEAD> <STYLE> OL{ list-style-type:decimal; list-style-punctuation: ')'; } OL.onlyNumbers{ list-style-punctuation: none; } </STYLE

据我所知，无论您设置了什么
列表样式类型
属性，分隔列表的数字或字母后面都会有一个句点（
）有没有办法把它改成右括号（
）
），或者干脆把它全部删除？

概念
以下是我想做的事情：

<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>
一般来说，我不希望与jQuery或JavaScript有任何关系。我希望它尽可能接近正确的HTML5和CSS 3。

您可以在伪元素和功能之前使用


检查一下
这是否适用于其他列表样式，如罗马数字？实际上，必须收回这一点，因为它不适用于HTML
值
属性。据我所知，
计数器
仅为数字。您所说的“它不适用于HTML值属性”是什么意思？请张贴您的代码…代码张贴在上面的编辑。这里还举例说明：您的代码不尊重
LI的
VALUE
属性elements@Supuhstar是的，这可以用罗马人来做。另见

  1) Won
  2) Too
  3) Tree
  4) Fore
100) Won Hun Dread

  1 Won
  2 Too
  3 Tree
  4 Fore
100 Won Hun Dread



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) " ";
}