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

任务概述

最终效果

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

所涉及知识点

html:class的使用

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