Child Selector не работает должным образом (выбирает селекторы, которые не являются прямыми детьми)

Question

Я не уверен, почему мой выбор ребенка не работает должным образом.В моем примере только прямой тег <li> должен иметь красный цвет.Но вместо этого все <li> теги окрашены в красный цвет.

Это скрипта jQuery моей проблемы:

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

Answer 1

Вложенные дети наследуют цвет от своих родителей, поэтому селектор фактически не соответствует им.Задание цвета текста по умолчанию li sa устраняет проблему (обратите внимание на порядок блоков правил 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