嘿，我一眼就揪出问题所在了——你的HTML列表嵌套结构不符合规范，这直接导致三级列表的CSS选择器完全匹配不到目标元素！

核心问题出在哪？ #

HTML里的<ul>和<ol>有个硬性规则：它们的直接子元素只能是<li>，绝对不能是另一个<ul>/<ol>。但你看你的代码，三级列表是直接放在二级<ul>里面，和二级<li>平级的，比如这段错误结构：

<ul>
  <li>ul li ul li </li>
  <ul> <!-- 这里错了！ul不能直接作为ul的子元素 -->
    <li>ul li ul li ul li </li>
  </ul>
</ul>

而你的CSS选择器#paham-post-content ul li > ul li > ul li是在找「二级<li>内部的<ul>里的<li>，再内部的<ul>里的<li>」，但实际你的三级列表根本不在二级<li>里面，自然匹配不到，样式也就不会生效。

解决方法（完全不需要新增类） #

第一步：修正HTML嵌套结构

把所有三级的<ul>/<ol>都放到对应的二级<li>标签内部，让它成为二级<li>的子元素。比如把刚才的错误结构改成这样：

<ul>
  <li>ul li ul li 
    <ul> <!-- 现在ul是li的子元素，符合规范 -->
      <li>ul li ul li ul li </li>
      <li>ul li ul li ul li </li>
    </ul>
  </li>
</ul>

你需要把所有类似的错误结构都修正，包括ol部分的三级列表，都是同样的问题。

第二步：保留你原来的CSS即可

等你把HTML结构修正后，你原来写的那些三级列表的CSS选择器就会自动生效了。当然，你也可以把选择器写得更明确一点，避免意外匹配，比如：

/* 三级ul（从ul出发的嵌套） */
#paham-post-content ul li > ul li > ul li {
  list-style-type: square;
  color: red;
}
/* 三级ol（从ul>ul出发的嵌套） */
#paham-post-content ul li > ul li > ol li {
  list-style-type: decimal;
  color: red;
}
/* 其他三级选择器同理 */

简单总结：你的CSS逻辑完全没问题，错就错在HTML的列表嵌套没写对，只要把三级列表放进二级<li>里，样式就会正常显示啦！

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