子选择器无法正常工作（选择不是直接子的选择器）答案

【问题标题】：Child Selector not working properly (selects selectors that are not direct children)子选择器无法正常工作（选择不是直接子的选择器）
【发布时间】：2012-03-06 14:45:06
【问题描述】：

我不确定为什么我的子选择器无法正常工作。在我的示例中，只有直接的<li> 标签应该是红色的。但是，所有的<li> 标签都是红色的。

这是我的问题的 jQuery 小提琴：

http://jsfiddle.net/5Jf4Y/2/

【问题讨论】：

标签： css css-selectors

【解决方案1】：

嵌套的孩子从他们的父母那里继承颜色，所以选择器实际上并没有匹配他们。为lis 提供默认文本颜色可以解决问题（注意 CSS 规则块的顺序，因为它会有所不同）。

演示：http://jsfiddle.net/5Jf4Y/6/

【讨论】：

我查看了您的演示并注意到您的 .courses ul li 规则在您的 .courses > ul > li 规则之后，导致所有列表项都是黑色的。我不知道这是否是为了说明顺序错误的后果，但它肯定与大多数人所追求的“解决问题”不相符；）
啊，我在 JSFiddle 上打了Run 而不是Save：jsfiddle.net/5Jf4Y/6。这可能是它不起作用的原因......

【解决方案2】：

~~我的猜测是你的两个选择器具有相同的特异性 + 颜色属性是继承的。~~

颜色属性是继承的。

首先为<li> 元素设置默认颜色，然后为直接子元素.courses > ul > li 应用不同的颜色：

.courses ul li { 
    color: Black;
    margin-left: 40px; 
}

.courses > ul > li { 
    color: #9E002E; 
    font-size: 20px; 
}

DEMO

【讨论】：

继承是这里唯一的关键角色。