Выбор дочерних предметов

Question

У меня есть HTML-код:

<ul id="top_nav">
<li >
    <a href="#">
        <span>About</span>
    </a>
</li>
<li class="active">
    <a href="#"><span>News</span></a>
    <ul>
        <li class="active">
            <a href="#">
                <span>News1</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>News2</span>
            </a>
        </li>
    </ul>
</li>
<li>
    <a href="#">
        <span>Contacts</span>
    </a>
</li>

Мне нужно выбрать News1 элемент.Я пытаюсь:

#top_nav li ul li .active a span{
    color:#ff0000;
}

Но все равно ничего хорошего.Вы можете попробовать сами в http://jsfiddle.net/dCGQ2/2/

Так есть какие-нибудь идеи по этому поводу?

Answer 1

#top_nav li ul li.active a span

Обратите внимание, пробела нет до .active. Это означает, что элемент (li в данном случае) имеет класс active. С пробелом это означает дочерний элемент с классом active.

Answer 2

Вы пытаетесь сопоставить «Элемент списка, который является членом активного класса» (li.active), но вы говорите «Член активного класса, который является потомком элемента списка» (li .active).

Избавьтесь от места.