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

Question

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

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

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

Answer 1

嵌套子项继承父项的颜色，因此选择器实际上并不匹配它们。赋予li默认文本颜色可以解决问题（注意CSS规则块的顺序，因为它会产生影响）。

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

Answer 2

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

继承了color属性。

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

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

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

<强> DEMO