CSS设置HTML自定义列表项目符号图片不显示，仅默认符号展示求助

问题排查&修复方案 #

现有代码错误点 #

• CSS语法不规范：ul样式中list-style-type未写属性值就直接加!important，还有多余的注释闭合符*/，会导致后续样式失效
• list-style-image参数错误：url()内仅需填写图片直链，不能嵌套<img>标签，当前写法无法识别图片资源
• 冗余错误属性：li的background-size设为0，即使使用背景图实现项目符号也完全无法显示
• HTML嵌套错误：ul是块级元素，不能放在p标签内，浏览器渲染时会自动提前闭合p标签，破坏样式继承关系

修复方案 #

方案1：直接修复原有list-style-image写法

修复后的CSS代码：

ul {
  list-style-position: inside;
  padding-left: 2rem;
}

ul li {
  padding-left: 0.5rem;
  /* url内直接放图片链接即可 */
  list-style-image: url("https://i.ibb.co/Tk59zVR/bullet-2.png");
}

修复后的HTML代码：

<!-- 把p标签替换为div，避免块级元素嵌套错误 -->
<div class="section-subtitle">
  <ul>
    <li>节省运营成本/内部人力成本</li>
    <li>让你能够专注于核心业务，不受其他事务干扰</li>
    <li>降低风险——避免违反政府规定产生的罚款</li>
    <li>缩小竞争差距——可获得与大型企业同等的技术和专业资源支持</li>
  </ul>
</div>

方案2：使用伪类背景图实现（更灵活，易调整位置尺寸）

如果觉得list-style-image的位置不好控制，推荐用这个方案，可控性更高：

ul {
  /* 关闭默认项目符号 */
  list-style: none;
  padding-left: 2rem;
}

ul li {
  position: relative;
  /* 给项目符号留出左侧空间 */
  padding-left: 1.8rem;
  margin-bottom: 0.5rem;
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  /* 调整垂直对齐位置，按需修改 */
  top: 0.2rem;
  /* 自定义图标尺寸 */
  width: 1rem;
  height: 1rem;
  background: url("https://i.ibb.co/Tk59zVR/bullet-2.png") no-repeat center center;
  background-size: contain;
}

HTML代码和方案1一致即可。

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