子选择器不能正常工作（选择不在直接子选择器）

Question

我不知道为什么我的孩子选择工作不正常。在我的示例中，只有直接<li>标签应该具有红色。但相反，所有<li>标签都以红色标记。

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

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

Answer 1

我的猜测是，无论你选择具有相同的特异性+色彩属性是继承。

颜色属性是继承。

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

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

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

DEMO

Answer 2

嵌套的孩子继承了父母的颜色，所以选择不匹配实际上他们。给li一个默认的文本颜色修复了问题（注意CSS规则块的顺序，因为它有所不同）。

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