为什么使用背景图标替换列表项项目符号的CSS规则突然失效？

开发者阿泽

2026-9-25

问题原因

选择器逻辑错误：你使用的.social-follow ul.follow-background + li.follow规则中，+是相邻兄弟选择器，仅能匹配和ul.follow-background同级、且紧跟在它后面的li元素。但你的所有li都是ul的子元素，因此这条针对li的基础样式规则完全没有生效，行高、内外边距、背景基础配置都没有命中目标元素。
行高参数无单位：规则中写的line-height: 32会被浏览器解析为当前字体大小的32倍行高，这是文本挤在一起的直接原因，实际需要的是像素单位32px。
补充说明：你给ul设置的list-style: none outside !important;本身是生效的，出现默认项目符号是因为全局li样式的优先级更高，覆盖了ul继承的属性。

修复方案

将错误的li基础样式选择器修改为后代选择器，补全行高单位，补充li的列表样式重置即可：

/* 把原来的li基础样式规则替换成下面这段 */
.social-follow ul.follow-background li.follow {
  list-style: none;
  line-height: 32px;
  background: no-repeat left 1px;
  /* fixed vertical position */
  margin: 0.3em 0 0 -0.6em;
  padding: 0 0 0 2.7em;
  overflow: hidden;
}