1. 首页
  2. css

CSS样式编号

如果你想在一个网站上对事物进行排序,那么排序列表()就是你的人。这也是很合理的,你想样式这些数字。奇怪的是,在CSS中设置这些列表编号的样式并不是一件很容易的事情。谢天谢地,这也并非不可能。Roger Johansson有一个教程,演示了如何使用:before伪元素,该伪元素可以将counter作为content属性的值。
但是要知道,应用编号计数器并不局限于有序列表。例如,假设您想对FAQ列表中的问题和答案对进行编号。
您会有这样的标记:

Each new 元素是一个新问题,因此我们应该在哪里应用编号。很简单:
.faq { counter-reset: my-badass-counter;}.faq dt:before { content: counter(my-badass-counter); counter-increment: my-badass-counter;}
根据您的意愿设计:before元素。例如:查看演示
只是想让你意识到这种能力。你开始思考各种各样的事情,一旦它沉入其中,你就开始数数。例如,我最近在博客上写了一个我最喜欢的食谱,我用块状的罗马数字给每个步骤/照片编号。这提醒我:数字不必是小数。他们可以是list-style-type可以是的任何东西。即:圆盘(•••)
圆形(○○○)
正方形(▪ ▪ ▪)
十进制(1 2 3)
十进制前导零(01,02,03)
下罗马语(i ii iii)
上罗马语(i ii iii)
下希腊语(αβγ)
下拉丁语(a b c)
上拉丁语(a b c)
亚美尼亚语(ԱԲԳ)
格鲁吉亚语(აბგ)
下阿尔法(a b c)
上阿尔法(a b c)
您需要做的就是在计数器值本身中指定哪个值:
content: counter(my-counter, lower-roman);<未来 上面的东西很酷,现在正在使用™ 营地。但是,当你看到CSS3的飞跃式发展清单时,你几乎会感到不舒服。一旦浏览器支持了这一点,我们就可以随心所欲地瞄准列表的标记: /*Examples from THE FUTURENo browser support at the time of this writing */li::marker {width: 30px;text-align: right;margin-right: 10px;display: inline-block;}ol {list-style: symbols(\"*\" \"2020\" \"2021\" \"A7\"); }ul {list-style-type: \"★\"; }

CSS样式编号 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%a0%b7%e5%bc%8f%e7%bc%96%e5%8f%b7/