Posted on | by liu
CSS DL 设置序号
在 HTML 中，大家经常使用 DL 元素来展示一些项目列表。DL 是 Definition List 的缩写，它的结构如下：
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
其中，DT 元素表示项目名称，DD 元素表示项目的定义。默认情况下，DL 中的项目是没有序号的。但是，有时候大家需要对项目进行编号。这时，大家可以使用 CSS 进行设置。
DL 元素有两种表现方式：水平列表和垂直列表。在水平列表中，项目名称和定义是并排展示的；在垂直列表中，项目名称和定义是交叉展示的。下面，大家分别介绍这两种情况下的序号设置方法。
1. 水平列表的序号设置
水平列表是最简单的 DL 列表形式。如果要为水平列表设置序号，只需要在 CSS 中添加如下代码：
dl { counter-reset: number; }
dt:before { content: counter(number,decimal) ". "; counter-increment: number; }
代码解释如下：
– `counter-reset` 属性用于重置计数器。
– `dt:before` 伪元素用于在每个 DT 元素的前面插入序号。
– `content` 属性用于设置序号的格式。
– `counter-increment` 属性用于增加计数器的值。
通过上述代码，大家可以实现水平列表的序号设置。
2. 垂直列表的序号设置
垂直列表相对于水平列表，稍微麻烦一些。为了实现垂直列表的序号设置，大家需要使用 CSS 的另一种技巧：使用伪元素 ::before 和 ::after 来插入额外的 HTML 内容。
dl { counter-reset: number; }
dt { position: relative; }
dt::before { content: counter(number) ". "; counter-increment: number; position: absolute; left:-30px; }
dd { margin-left: 40px; }
代码解释如下：
– `dt` 元素的 `position` 属性设置为 `relative`，以支持子元素的绝对定位。
– `dt::before` 伪元素用于在每个 DT 元素的左侧插入序号，并设置为绝对定位。
– `content` 属性用于设置序号的格式。
– `dt` 元素左侧的空间可通过 `left` 属性进行调整。
– `dd` 元素的左边距通过 `margin-left` 属性进行调整。
通过上述代码，大家可以为垂直列表添加序号。需要注意的是，为了适应不同项目名称的长度，大家使用了绝对定位和左侧距离的方式来进行序号的展示。
总结
通过上述方法，大家可以为 HTML 中的 DL 元素添加序号，进一步提高列表的可读性和可访问性。需要注意的是，DL 元素仅适用于定义列表和术语列表，对于有序和无序列表应该使用 OL 和 UL 元素。