自定义ol序号兼容IE9

自定义ol序号，类似Word中带有层次结构的序号

要求生成的网页和Word上所展示的格式一模一样

在html中该如何保证序号一致

我们已知层次顺序的排列是：1/A./(1)/(a)/1./a./(1)/(a) 共八层

html

	<ol class="web-ol-1">
		<li>第一次第一项</li>
		<li>第一层第二项
			<ol class="web-ol-2">
				<li>第二层第一项</li>
				<li>第二层第二项
					<ol class="web-ol-3">
						<li>第三层第一项</li>
						<li>第三层第二项
							<ol class="web-ol-4">
								<li>第四层第一项</li>
								<li>第四层第二项
									<ol class="web-ol-5">
										<li>第五层第一项</li>
										<li>第五层第二项
											<ol class="web-ol-6">
												<li>第六层第一项</li>
												<li>第六层第二项
													<ol class="web-ol-7">
														<li>第七层第一项</li>
														<li>第七层第二项
															<ol class="web-ol-8">
																<li>第八层第一项</li>
																<li>第八层第二项</li>
															</ol>
														</li>
													</ol>
												</li>
											</ol>
										</li>
									</ol>
								</li>
							</ol>
						</li>
					</ol>
				</li>
			</ol>
		</li>
	</ol>

css 兼容IE9

	/* ol 层级序号 1/A./(1)/(a)/1./a./(1)/(a) */
	ol{position:relative;}
	ol.web-ol-1{list-style-type: none;padding-left:40px;counter-reset: item;}ol.web-ol-1>li::before{content:counter(item);counter-increment: item;position:absolute;left:0px;width:30px;text-align:right;}
	ol.web-ol-2{list-style-type: upper-alpha;counter-reset: item;}
	/* 第三层和第七层一样 */
	ol.web-ol-3,ol.web-ol-7{list-style-type: none;padding-left:40px;counter-reset: item;}ol.web-ol-3>li::before,ol.web-ol-7>li::before{content: "(" counter(item) ") ";counter-increment: item;position:absolute;left:0px;width:30px;text-align:right;}
	/* 第四层和第八层一样 */
	ol.web-ol-4,ol.web-ol-8{list-style-type: none;padding-left:40px;counter-reset: item;}ol.web-ol-4>li::before,ol.web-ol-8>li::before{content: "(" counter(item,lower-alpha) ")";counter-increment: item;position:absolute;left:0px;width:30px;text-align:right;}
	ol.web-ol-5{list-style-type: decimal;counter-reset: item;}
	ol.web-ol-6{list-style-type: lower-alpha;counter-reset: item;}

最后就得到了和Word一致的序号列表

说明

counter-reset: item;：在每个层级的 <ol> 开始时重置计数器，使每个层级从头开始编号。
counter-increment: item;：每当遇到一个新的 <li> 项目时，计数器 item 增加。
通过 content 属性自定义不同层级的编号样式，如大写字母、小写字母、带括号的数字等。