如何用CSS Selector选中第一层列表项？为何>子选择器未生效？

你的疑问解答 #

你对>子选择器的理解完全正确——ul > li确实只会选中<ul>的直接子元素<li>，并没有选中嵌套列表里的<li>。你看到所有列表项都变红，是CSS继承导致的：外层<li>设置的background-color会被它内部的所有元素（包括嵌套的<ol>和里面的<li>）继承，看起来像是嵌套列表项被选中了，实际上并没有。

解决方法 #

你可以通过以下几种方式实现仅让外层列表项显示红色背景：

方法1：覆盖内部元素的背景色

给外层<li>的直接子元素（<span>和<ol>）设置背景色，抵消继承的效果：

ul > li {
  background-color: red;
}
/* 覆盖内部元素的背景色 */
ul > li > span,
ul > li > ol {
  background-color: #fff; /* 换成你需要的背景色，比如页面默认背景 */
}

方法2：限制背景色的作用范围

使用background-clip属性让背景色只作用于外层<li>的内容区域，需要配合padding使用：

ul > li {
  background-color: red;
  padding: 6px; /* 给内容留出空间 */
  background-clip: content-box; /* 背景仅覆盖内容区域，不包括padding */
}

方法3：直接给目标元素设置样式

如果你的需求是让外层列表的标题（<span>）变红，直接选中<span>更精准，完全不会影响内部列表：

ul > li > span {
  background-color: red;
}

你可以打开浏览器开发者工具（F12）查看元素的样式，就能清楚看到ul > li只作用于外层的四个<li>，嵌套列表的<li>并没有被这个选择器选中。

内容的提问来源于stack exchange，提问作者w.storey