html - 不能将选项卡字体颜色选择为黑色

Question

我正在尝试使用 CSS 设计一些标签并关注这篇文章。不幸的是，我无法将选定的标签字体颜色设置为黑色。

我创建了一个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;
}