为非列表元素设置列表样式

任务概述

最终效果

以段落例，实现自定义列表，并且自动排序

所涉及知识点

1. html:class的使用
2. css ：计数器(counter),列表样式(list-style)，:before

任务

为元素设置计数器

效果图：

思路：
1. 首先随便写几个<p>,<hn>元素（废话）
2. 通过给父元素设置counter-reset初始化计数器
3. 通过:before给所要设置计数器的元素设置counter-increament,counter()
代码：

body{counter-reset   : alph;}
h3:before{
    content          :counter(alph)".";
    counter-increment: alph;
}

更改样式

效果图：

思路：

方法很简单。因为counter可以设置其他列表样式，所以直接写入即可。

h3:before{
    content:"("counter(alph,upper-latin)")";
}