爲非列表元素設置列表樣式

任務概述

最終效果

以段落例，實現自定義列表，並且自動排序

所涉及知識點

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