如何让有序列表编号与.active类列表项一同被样式化？

默认情况下，有序列表的编号是在<li>的外部盒子中渲染的，所以直接给<li>添加背景等样式只会覆盖内容区域，无法影响到编号。下面提供两种可行的解决方法：

方法一：调整编号位置到列表项内部 #

通过list-style-position: inside将编号移入<li>的内容框内，这样列表项的背景样式就能覆盖编号：

ol {
  list-style-position: inside; /* 将编号移至li内容区域内 */
}

li.active {
  background-color: #c5ecbe;
  width: 14em;
  padding: 3px 6px;
  border-radius: 8px;
}

注意：此方法会让编号占用<li>的内容空间，可能需要根据排版需求微调padding值。

方法二：自定义编号（更灵活可控） #

使用CSS计数器完全自定义编号的样式与位置，既能让编号融入列表项的背景，还能单独调整编号的样式：

ol {
  counter-reset: list-counter; /* 初始化计数器 */
  list-style: none; /* 隐藏默认编号 */
  padding-left: 0; /* 移除默认内边距 */
}

li {
  counter-increment: list-counter; /* 每个列表项递增计数器 */
  padding-left: 1.5em; /* 为自定义编号预留空间 */
  position: relative;
}

li:before {
  content: counter(list-counter) "."; /* 生成带点的编号 */
  position: absolute;
  left: 0; /* 将编号定位到预留空间处 */
}

li.active {
  background-color: #c5ecbe;
  width: 14em;
  padding: 3px 6px 3px 1.5em; /* 调整padding确保编号在背景范围内 */
  border-radius: 8px;
}

如果需要给.active状态的编号单独设置样式，只需添加：

li.active:before {
  color: #fff; /* 示例：将编号改为白色 */
  font-weight: bold;
}

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