适当的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/