场景：我们使用html中的有序标签时，有时会出现以下需求：
（1）水果
（2）肉
（3）蔬菜
问题：html中的有序标签的格式是以下这种格式，怎样通过css样式设置实现以上场景需求呢
- 水果
- 肉
- 蔬菜
方法：
这里需要用到大部分人不太了解学习的两个css属性的使用方法。
那就是counter-reset和counter-increment。
这里有这两个属性的具体解释：
菜鸟教程关于CSS中counter-reset属性的讲解
属性定义及使用说明
counter-increment属性递增一个或多个计数器值。
counter-increment属性通常用于counter-reset属性和content属性。
以下具体使用代码示例和展示：
使用该属性前：
使用该属性后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list样式</title>
<style>
*{
margin: 0;
padding: 0;
}
ol {
counter-reset: item;
}
li{
list-style-type: none;
margin-left: 2em;
}
li::before{
display: inline-block;
counter-increment: item;
content: '(' counter(item) ')';
width: 2em;
text-align: right;
}
</style>
</head>
<body>
<ol>
<li>水果</li>
<li>蔬菜</li>
<li>肉</li>
<li>水果</li>
<li>蔬菜</li>
<li>肉</li>
<li>水果</li>
<li>水果</li>
<li>蔬菜</li>
<li>肉</li>
<li>水果</li>
<li>蔬菜</li>
<li>肉</li>
<li>水果</li>
</ol>
</body>
</html>