CSS子选择器在嵌套列表中失效，如何仅选中一级列表直接子元素<li>？

你遇到的问题本质不是ul.level-1 > li选择器选中了嵌套列表里的<li>，而是颜色属于可继承CSS属性，一级<li>的红色样式会被其内部嵌套的所有子<li>继承，看起来像是被选择器选中了，实际是样式继承导致的。

不需要将嵌套列表改为<div>，用以下两种公认解法就能解决：

解法1：重置嵌套子元素的继承样式 #

直接给一级<li>设置红色，再重置二级及以下列表的<li>颜色为你需要的默认值：

/* 仅给level-1的直接子li设置红色 */
ul.level-1 > li {
  color: red;
}

/* 重置所有嵌套在level-1里的子li颜色，避免继承 */
ul.level-1 li li {
  color: initial; /* 或者指定具体颜色，比如 #333、black */
}

解法2：给一级li添加专属类名 #

通过类名精准标记一级菜单项，避免继承混淆：

<ul class="level-1">
  <li class="main-item">主菜单项1
    <ul class="sub-menu">
      <li>子菜单项1</li>
      <li>子菜单项2</li>
    </ul>
  </li>
  <li class="main-item">主菜单项2</li>
</ul>

.main-item {
  color: red;
}
.sub-menu li {
  color: #333; /* 自定义子菜单文字颜色 */
}

这两种方式都能在保持嵌套列表HTML结构合法性的前提下，实现仅一级菜单项变红的需求。

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