为什么class为b的ul下首个li同时出现两种列表符号样式？

异常原因 #

你看到的双符号并不是内层.b类ul的第一个li生成了两个列表符号，本质是外层.a类ul的第二个直接子li（也就是包裹整个内层ul.b的那个li）自带的圆形列表符号，和内层第一个li的方形符号视觉重叠导致的：

• 外层ul.a设置了list-style-type: circle，它的所有直接子li默认都会显示圆形符号，你没有针对包裹ul.b的这个外层li做隐藏符号的处理
• 这个外层li的圆形符号刚好和内层第一个li的方形符号处于同一水平位置，看起来就像第一个li同时有两种符号；内层后续的li位置往下偏移，不会和外层的圆形符号重叠，所以显示正常

你可以用浏览器开发者工具的元素选择器选中那个多余的圆形符号，就能看到它所属的DOM节点是外层的li，验证这个问题根源。

修复方案 #

只要把包裹内层ul.b的外层li的列表符号隐藏即可，提供两种常用实现方式：

方案1：针对性加类处理（兼容性最好） #

给包裹ul.b的外层li新增自定义类，单独隐藏它的符号：
CSS新增规则：

ul.a > li.no-list-marker {
  list-style: none;
}

对应HTML修改：

<ul class="a">
  <li>
    <h2>To care for a cat you will need to:</h2>
  </li>
  <!-- 给包裹内层列表的外层li加自定义类 -->
  <li class="no-list-marker">
    <ul class="b">
      <!-- 内层li代码保持不变 -->
    </ul>
  </li>
</ul>

方案2：通用规则自动处理 #

如果你的业务场景中所有外层ul.a的子li只要嵌套了ul.b就不需要显示符号，可以用通用规则处理：

/* 支持:has选择器的现代浏览器 */
ul.a > li:has(> ul.b) {
  list-style: none;
}

如果需要兼容不支持:has选择器的旧浏览器，也可以根据你的实际结构写适配规则，比如当前场景下只有包含h2的外层li需要显示圆形符号，其他外层li都隐藏，就可以写：

ul.a > li {
  list-style: none;
}
ul.a > li:has(h2) {
  list-style: circle;
}

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