我来帮你搞定这几个头疼的问题，让你的自定义项目符号正常工作：

完整修复代码 #

/* 清除主UL的默认项目符号，预留自定义符号的显示空间 */
.thunderbolt {
  list-style: none;
  padding-left: 2em;
}

/* 仅选中.thunderbolt的直接子LI，避免影响嵌套列表 */
.thunderbolt > li {
  position: relative;
}

/* 为每个直接子LI设置对应Unicode符号，并定位到正确位置 */
.thunderbolt > li:nth-child(1):before {
  content: "\26A1 ";
  position: absolute;
  left: -1.5em;
}
.thunderbolt > li:nth-child(2):before {
  content: "\f501 ";
  position: absolute;
  left: -1.5em;
}
.thunderbolt > li:nth-child(3):before {
  content: "\f3c3 ";
  position: absolute;
  left: -1.5em;
}
.thunderbolt > li:nth-child(4):before {
  content: "\f554 ";
  position: absolute;
  left: -1.5em;
}
.thunderbolt > li:nth-child(5):before {
  content: "\f6ab ";
  position: absolute;
  left: -1.5em;
}
.thunderbolt > li:nth-child(6):before {
  content: "\2685";
  position: absolute;
  left: -1.5em;
}

/* 恢复嵌套UL的默认项目符号样式 */
.thunderbolt ul {
  list-style: disc;
  padding-left: 1.5em;
}

逐个问题的解决思路 #

• 原项目符号与自定义符号共存：给.thunderbolt这个主UL直接设置list-style:none，清除默认符号，同时通过padding-left预留出显示自定义符号的空间，避免符号和文本重叠。
• 嵌套UL被错误应用样式：使用CSS子选择器>（比如.thunderbolt > li），仅选中主UL的直接子元素LI，嵌套在LI内部的列表完全不受影响。最后给嵌套UL设置list-style:disc，确保它恢复默认的项目符号。
• 设置list-style:none后自定义符号消失：给LI添加position:relative，再给伪元素设置position:absolute，将符号定位到LI左侧预留的padding区域内，这样不管LI内容如何换行，符号都能保持在正确位置。
• nth-child计数错误：原选择器.thunderbolt li:nth-child(n)会选中所有后代LI（包括嵌套的），导致计数混乱。换成.thunderbolt > li:nth-child(n)后，仅计数主UL的直接子LI，嵌套元素不会被计入，符号就能对应正确的位置了。

注意：你用的部分符号是Font Awesome图标（比如），需要确保页面加载了对应字体文件，否则会显示为方块。如果不想依赖外部字体，建议替换为通用Unicode符号（比如\26A1这类）。

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