html - 无法使用类 (.selected) 更改 ID (#sidebar) 的 <a> 颜色和背景颜色

Question

我是 HTML 和 CSS 的新手，我在做第一个元素时就遇到了问题。

好吧，我创建了一个名为 sidebar 的 ID，这样我就可以在页面左侧有一个子菜单，还有一个名为 selected 的类，它将标识实际选择的子菜单。

<div id="sidebar">
    <h2>Sub Menu</h2>
    <ul>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#" class="selected">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
      <li><a href="#">F</a></li>
    </ul>
</div>

然后在我的 css "style.css"

#sidebar {
    float: left;
    width: 160px;
    margin: 0;
    padding: 0 1em 0 1em;
}
            /*SIDE MENU*/
#sidebar ul {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}
#sidebar ul li { 
    display: inline;
    padding: 0;
    margin: 0;
}
#sidebar ul li a {
    display: block;
    color: #385900;
    background: inherit;
    text-decoration: none;
    margin: 0;
    padding: 5px 0 5px 0;
    border-bottom: 1px solid #C0C0C0;
}
#sidebar ul li a:hover {
    text-decoration: none;
    background: #E6E7E9;
    color: #DA7910;
}

这很好用并且满足了我的需要；

当我尝试更改所选子菜单的颜色和背景颜色时出现问题。 .selectd 类无法对 #sidebar ID 应用颜色更改，只有 Font-weight 和 font-size 按我的预期工作。

.selected {
    color:white;
    background-color:#385900;
    font-weight:bold;
}

我做错了什么？我缺什么？

提前致谢!

Answer 1

是时候学习 CSS 的高级主题之一了 Specificity .

使用 #sidebar ul li a.selected 而不是仅使用 .selected 来增加 CSS 选择器的特异性。