子セレクタが正常に動作しない（直接の子ではないセレクタを選択）

Question

子セレクタが正しく動作しない理由がわかりません。私の例では、直接<li>タグだけが赤色でなければなりません。代わりに、<li>のタグはすべて赤色に着色されています。

これは私の問題のjQueryのフィドルです：

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

Answer 1

私の推測では、両方のあなたのセレクタが同じ特異+カラープロパティが継承されていることです。

colorプロパティは継承されます。

最初<li>要素のデフォルトの色を設定し、直接子供.courses > ul > liに異なる色適用：私はあなたのデモを見て、あなたが `UL李.coursesことに気づい

.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/