仅使用纯CSS能否为单列表项和多列表项的列表设置不同样式？

完全可以通过纯CSS实现该需求，核心依赖CSS的:only-child伪类，根据浏览器兼容要求可以选择两种实现方案：

方案1：使用:has()选择器（推荐，逻辑直观） #

目前Chrome 105+、Firefox 121+、Safari 15.4+均已支持该选择器，覆盖全球90%以上的用户群体，可以直接选中仅包含单个列表项的列表元素做样式修改：

/* 所有列表的默认样式（多列表项场景） */
ul, ol {
  list-style-type: disc;
  padding-left: 40px;
}

/* 匹配仅含有1个li的列表，覆盖特殊样式 */
ul:has(> li:only-child),
ol:has(> li:only-child) {
  list-style-type: none;
  padding-left: 20px; /* 替换为你需要的自定义内边距 */
}

方案2：兼容旧浏览器的无:has()方案 #

如果需要兼容不支持:has()的旧版本浏览器，可以通过子元素选择器配合边距调整实现同等效果：

/* 所有列表的默认样式（多列表项场景） */
ul, ol {
  list-style-type: disc;
  padding-left: 40px;
}

/* 匹配仅有的1个li，调整样式抵消父元素默认设置 */
ul > li:only-child,
ol > li:only-child {
  list-style-type: none;
  /* 负边距数值等于默认padding-left和你需要的单列表padding-left的差值 */
  margin-left: -20px;
}

两种方案都不需要任何JavaScript代码介入，列表的子元素数量变化时样式会自动更新。

内容的提问来源于stack exchange，提问作者g.pickardou