CSS子选择器(child selector)生效范围不符合预期问题咨询

你对子选择器和后代选择器的理解没有偏差，出现预期外的效果是受CSS的样式继承特性影响，具体原因如下：

• 首先验证选择器的匹配逻辑：ol>li 确实只会选中ol的直接子级li，也就是你代码里的3个主列表项，嵌套在ul内部的子列表li不会被这个选择器命中，这部分你的理解完全正确。
• 颜色全局生效的原因：color 是CSS默认会继承的属性，当父元素设置了color值之后，所有后代元素只要没有主动覆盖color属性，就会自动沿用父元素的颜色。你给ol的直接子li设置了color: blueviolet，第三个主列表项本身被命中应用了该颜色，它内部的ul、ul下的li都没有单独设置color属性，所以自动继承了父级li的颜色，看起来就像是也被选择器匹配到了。

你可以修改CSS代码做个简单测试，就能直观看到两类选择器的区别：

ol>li {
  color: blueviolet;
  /* border属于默认不继承的属性 */
  border: 1px solid red;
}

运行后你会发现只有3个主列表项带有红色边框，子列表的li完全没有边框，这就证明ol>li确实只匹配了直接子级元素，颜色统一只是继承特性导致的附加效果。

如果换成后代选择器ol li，那么子列表的li也会被选中，同样会带上红色边框，这就是子选择器和后代选择器的核心差异。

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