Проблема с селектором классов CSS

Question

Почему это не работает? Я новичок в CSS, и я не знаю, почему следующее не будет работать.

<div id="nav">
    <ul id="tabnav">
        <li class="selected"><a href="index.php">Tab One</a></li>
        <li><a href="index2.html">Tab Two</a></li>
        <li><a href="index3.html">Tab Three</a></li>
        <li><a href="index4.html">Tab Four</a></li>
    </ul>
</div>

CSS:

ul #tabnav li.selected { 
    background-color: #f00;
}

Answer 1

Потому что нет элемента с идентификатором tabnav как child элемента ul.

Либо удалите ul

#tabnav li.selected { 
    background-color: #f00;
}

, либо прикрепите его к ul

ul#tabnav li.selected { 
    background-color: #f00;
}

Answer 2

Попробуйте:

<style type="text/css">
#nav #tabnav li.selected {
    background-color: #f00;
}
</style>

Answer 3

Дополнение к ответу выше:
Я не знаю, как хорошо CSS работает с background-color: # f00; Шестнадцатеричное значение должно быть длиной шесть десятичных знаков. (два первых обозначают красный, следующий синий и последний зеленый)

background-color:#FF0000;