适当的CSS来设置嵌套元素的样式

Question

我正在开发CSS下拉列表。我希望能够在我的下拉列表中添加一个类active来列出元素，以显示特定项目是当前选择。问题是，我无法改变文本颜色。背景确实如此，但不是文本......

演示：http://jsfiddle.net/tMND4/4/

HTML：

<ul class="dropdown">
    <li>
        <a href="#">Nice test items</a>
        <ul class="submenu">
               <li><a href="#">Sonic Screwdriver</a></li>
               <li class="active"><a href="#">TARDIS</a></li>
               <li><a href="#">Long Scarf</a></li>
        </ul>
    </li>
</ul>

CSS：

body{
    padding:10px;
}

.dropdown > li{
    width:200px; /*or anything you want!*/
    color:#333;
    text-decoration:none;
    padding:2px; /*all things wont stick to the side */
}

.dropdown li a{
    display:block;
    color:#666;
    text-decoration:none;
    padding:5px; /*line it up with sublinks */
}

.dropdown li .submenu{
    display:none; /*hide submenu*/
}
/* child selector to prevent style propagation*/
.dropdown > li:hover{
    border:1px solid #666;
}

/* child selector to prevent style propagation*/
.dropdown > li:hover a {
    padding: 4px; /*reduced padding to compensate for border*/
}

.dropdown li:hover .submenu{
    display:block; /*display submenu*/
}

.dropdown li:hover .submenu a{
    display:block;
    padding:5px; /*line it up with links */
}

.dropdown li:hover .submenu a:hover{
    background: #DDD;
}

.active{ 
    background:#666;
    color:#FFF;
}

Answer 1

这是由于特异性。您必须更加具体地使用.active选择器。

例如：

.dropdown li.active a { 
    background:#666;
    color:#FFF;
}

这是你的小提琴：http://jsfiddle.net/tMND4/5/

Answer 2

此：

.dropdown li a{
    color:#666;
}

胜过这个：

.active {
    color:#FFF;
}

因为您将active应用于包装LI而不是A.

这可能会解决它：

.dropdown li.active a {
    color:#FFF;
}