如何为列表hover项设置背景且不改变所有子元素的背景？

要实现仅hover的列表项显示背景且不影响子元素，核心思路是用伪元素定位隔离背景区域，让背景只覆盖当前列表项的文本内容，而非整个包含子列表的li盒子。这种方法完全适配任意层级的嵌套列表，代码如下：

HTML示例（支持任意嵌套层级） #

<ul>
  <li>父项1
    <ul>
      <li>子项1-1
        <ul>
          <li>孙项1-1-1</li>
          <li>孙项1-1-2</li>
        </ul>
      </li>
      <li>子项1-2</li>
    </ul>
  </li>
  <li>父项2</li>
</ul>

CSS核心代码 #

/* 基础列表样式，可按需调整 */
ul {
  list-style: none;
  padding-left: 20px;
}

li {
  position: relative; /* 为伪元素提供定位基准 */
  padding: 4px 8px;
}

/* hover背景的核心实现 */
li:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5f3ff; /* 自定义hover背景色 */
  z-index: -1; /* 让伪元素在文本下方，不遮挡内容与子列表 */
}

原理说明 #

1. 相对定位的li：给每个li设置position: relative，让伪元素能基于li的边界精准定位。
2. 伪元素层级控制：z-index: -1让伪元素落在当前li文本的下方，同时子列表作为li的子元素，层级默认高于伪元素，因此不会被背景覆盖。
3. 自适应嵌套：无需指定层级选择器（如ul > li），所有li自动适配规则，无论嵌套多少层，hover时只有触发项显示背景。

为什么之前的方法无效？ #

• 直接给li:hover加background：li的盒子包含所有子元素，子列表会“浮”在父li的背景上，看起来子元素也被覆盖。
• 使用:not选择器：无法从结构上区分li的内容区域和子列表区域，因为子列表是li的直接子元素，始终在li的盒子范围内。

内容的提问来源于stack exchange，提问作者Résu