CSS直接子选择器未按预期生效的原因是什么？

你写的ul > li确实精准选中了<ul>的直接子元素<li>（也就是List Item 1、2、3、4），并给它们设置了color: gray。问题出在CSS的继承特性上：

• color是可继承的CSS属性，当你给父元素（这里是包含<ol>的那个<li>）设置颜色后，它内部的所有子元素（包括<ol>里的<li>）都会自动继承这个颜色值，所以子列表的项也跟着变成了灰色。

解决办法 #

你可以通过重置子列表项的颜色来修正这个问题，比如：

/* 给ul的直接子li设置灰色 */
ul > li {
  color: gray;
}
/* 重置ol下的li为默认文本颜色 */
ul > li ol li {
  color: black;
}

或者使用initial关键字直接恢复浏览器默认值，不用硬写颜色：

ul > li {
  color: gray;
}
ul ol li {
  color: initial;
}

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