CSS自动生成序号（不使用JS,可任意排序），以及使用字母序号

代码盗圣

已于 2022-09-25 18:14:59 修改

阅读量1.4k

点赞数

分类专栏：前端开发文章标签： css

于 2022-02-25 19:05:33 首次发布

本文链接：https://blog.csdn.net/sinat_27171121/article/details/123139266

版权

前端开发专栏收录该内容

8 篇文章 2 订阅

订阅专栏

简单入门

原文地址 https://www.cnblogs.com/hf8051/p/5109184.html，不用看注释，直接理解css代码即可，对于简单的代码来说，注释反而是混淆与捣乱。

原文内容，用菜鸟解压工具解压（美化）：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {counter-reset:section;}
        h1 {counter-reset:subsection;}
        h1:before
        {
			counter-increment:section;
			content:"哈哈" counter(section) ". ";
        }
        h2:before 
        {
			counter-increment:subsection;
			content:counter(section) "." counter(subsection) " ";
        }
    </style>
</head>

<body>

    <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

    <h1>HTML tutorials</h1>
    <h2>HTML Tutorial</h2>
    <h2>XHTML Tutorial</h2>
    <h2>CSS Tutorial</h2>

    <h1>Scripting tutorials</h1>
    <h2>JavaScript</h2>
    <h2>VBScript</h2>

    <h1>XML tutorials</h1>
    <h2>XML</h2>
    <h2>XSL</h2>

</body>

</html>
</details>

该演示复杂、结构较乱，可以先学习我修改出来的优化版本：


<style>
	.type {counter-reset:def;}
	.d:before 
	{
		counter-increment:def;
		content:counter(def) ". ";
	}
</style>

<div class='type'>adj</div>

<div class='d'>XHTML Tutorial</div>
<div class='d'>CSS Tutorial</div>
<div class='d'>CSS Tutorial</div>
<div class='d'>CSS Tutorial</div>
<div class='d'>CSS Tutorial</div>

<br>
<div class='type'>verb</div>

<div class='d'>XHTML Tutorial</div>
<div class='d'>CSS Tutorial</div>

是不是简单很多？

“效果图”：

adj

1. XHTML Tutorial

2. CSS Tutorial

3. CSS Tutorial

verb

1. XHTML Tutorial

2. CSS Tutorial

字母序号

运用字母序号，还可以简化“类zhihu/wiki脚注”链接的生成！

多上标可对应同一脚注，而脚注则需要排好a,b,c,等链接指回各个上标。

		content:counter(def, lower-alpha) ". ";

具体代码:

<style>
	.ReferenceList>LI {counter-reset:ref;}
	SUP>A:before 
	{
		counter-increment:ref;
		content:counter(ref, lower-alpha);
		
	}
</style>

<H2 class='type'>参考</H2>

<ol class="ReferenceList">
	<li id="ref_2" tabindex="0"><span>^</span>
		<sup class="ReferenceList-backLink"><a href=""></a></sup>
		<sup class="ReferenceList-backLink"><a href=""></a></sup>
		<span>
			假装我是一条参考链接
		</span>
	</li>
</ol>

效果图：
请添加图片描述

除了lower-alpha，还有其他丰富的样式可供选择 ——

Others include: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.