如何为一组<li>元素添加标题/标签并为其设置背景阴影？

你其实完全可以同时实现所有这些需求！咱们可以利用CSS计数器来替代<ol>的start属性，自动维护连续编号，同时通过巧妙的样式设置搞定背景覆盖项目符号、文本正常缩进这些要求，全程不需要JavaScript，也不用手动调整编号。

核心思路 #

• 用单个<ol>包含所有列表项，避免拆分多个列表导致的编号维护问题
• 用CSS计数器实现自动连续编号，替代默认的<ol>编号
• 通过自定义类标记分组标签和分组内的列表项，用CSS控制背景和布局

完整代码实现 #

CSS 样式

/* 基础列表样式：去掉默认编号，重置内外边距 */
.continuous-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: list-counter; /* 初始化计数器 */
}

/* 通用列表项样式：递增计数器，设置文本缩进 */
.continuous-list li {
  counter-increment: list-counter;
  position: relative;
  padding: 0.25em 0.5em 0.25em 2em; /* 左侧留足够空间放编号 */
  margin: 0;
}

/* 用计数器生成连续编号，模拟默认ol的样式 */
.continuous-list li::before {
  content: counter(list-counter) ".";
  position: absolute;
  left: 0.5em; /* 编号和文本的间距 */
  font-weight: normal;
}

/* 分组标签样式：不参与编号计数，设置银色背景和顶部圆角 */
.continuous-list li.group-label {
  counter-increment: none; /* 跳过计数器递增 */
  background: silver;
  border-radius: 9px 9px 0 0;
  padding-left: 0.5em;
  margin-top: 1em; /* 和上方列表项拉开间距 */
  font-weight: bold; /* 可选：突出标签 */
}

/* 分组内列表项样式：浅灰色背景 */
.continuous-list li.group-item {
  background: gainsboro;
}

/* 分组最后一项添加底部圆角，和标签的顶部圆角呼应 */
.continuous-list li.group-item:last-of-type {
  border-radius: 0 0 9px 9px;
}

HTML 结构

<ol class="continuous-list">
  <li>item 1</li>
  <li>item 2</li>
  <!-- 分组标签 -->
  <li class="group-label">Group</li>
  <li class="group-item">item 3</li>
  <li class="group-item">item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <!-- 另一个分组示例 -->
  <li class="group-label">Another Group</li>
  <li class="group-item">item 7</li>
  <li class="group-item">item 8</li>
  <li class="group-item">item 9</li>
</ol>

为什么这个方案满足所有条件？ #

• 背景覆盖项目符号区域：列表项的背景会延伸到左侧的编号区域（因为我们去掉了<ol>的默认padding，列表项的padding-left包含了编号的空间，背景会填充整个元素区域）
• 文本保持正常缩进：通过padding-left: 2em让文本和编号保持合适的距离，和默认<ol>的缩进效果一致
• 代码符合规范：语义化的<ol>和<li>结构，CSS类命名清晰，逻辑简洁
• 易于更新：所有列表项都在一个<ol>里，添加/移除项时编号自动更新，完全不需要手动调整start属性
• 不需要JavaScript：全程用CSS计数器和样式实现，无脚本依赖

这样不管你添加、移除多少列表项，分组的样式和编号都会自动维护，完全解决了你之前的痛点！

内容的提问来源于stack exchange，提问作者Michael Bluejay