html - 无法将选项卡字体颜色选择为黑色

Question

我正在尝试使用 CSS 设计一些选项卡并遵循此 post .不幸的是，我无法将选定的选项卡字体颜色设置为黑色。

我创建了一个 JsFiddle来描述问题。我做错了什么？

这是 HTML:

<div id="header"> 

    <h1>Tabs</h1>
    <ul>
        <li><a href="#">This</a></li>
        <li id="selected"><a href="#">That</a></li>
        <li><a href="#">The Other</a></li>
        <li><a href="#">Banana</a></li>
    </ul>

</div> 

这是 CSS:

h1 {
    margin: 0;
    padding: 0 0 5px 0;
}

#header a {
    text-decoration:none;
}

#header ul {
    list-style: none;
    padding:0;
    margin:0;
}

#header li {
    float: left;
    border: 1px solid;
    border-color: black;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 2px 4px;
    /* border-bottom-width: 0; */
    margin: 2px 2px 0 0;
    background: black;
}

#header li a {
    color: white;
}

#header #selected {
    position: relative;
    /* top: 1px; */
    background: white;
}

#header #selected li a {
    color: black;
}

Answer 1

更新的 jsFiddle:http://jsfiddle.net/zK7y2/1/

#header #selected li a {
    color: black;
}

这解决了一个 <* id="header"><* id="selected"><li><a> .

您要选择的是 <* id="header"><li id="selected"><a> .

所以使用:

#header li#selected a {
    color: black;
}