设置display:flex时通过CSS Counters给ol li添加序号不生效如何解决

你遇到的问题核心是：<li>的默认序号依赖display: list-item属性渲染，修改为display: flex后默认列表标记会消失，同时你现有计数器代码缺少初始化和值渲染逻辑，无法生效。

修复方案 #

补充计数器初始化、伪元素内容渲染规则即可，完整CSS代码如下：

/* 给第二个列表初始化计数器，隐藏默认列表样式避免冲突 */
#two {
  counter-reset: li-counter;
  list-style: none;
  padding-left: 2em; /* 保持和默认ol一致的缩进，可按需调整 */
}
/* 保留你需要的flex属性 */
#two li {
  display: flex;
  margin: 4px 0;
}
/* 伪类实现序号渲染 */
#two li::before {
  counter-increment: li-counter;
  content: counter(li-counter) ". ";
  margin-right: 6px;
  /* 保证序号和flex内容顶部对齐，不需要可删除 */
  align-self: flex-start;
}

原有HTML代码无需修改，即可实现两个列表序号展示效果一致。

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