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

【问题标题】：can't change <a> color and background color of an ID (#sidebar) with a class (.selected)无法使用类 (.selected) 更改 ID (#sidebar) 的 <a> 颜色和背景颜色
【发布时间】：2015-11-30 19:24:21
【问题描述】：

我是 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;
}

我做错了什么？我错过了什么？

提前致谢！

【问题讨论】：

在 CSS 中，最具体的选择器规则“获胜”。请参阅：codepen.io/anon/pen/meyxXr，了解您想要的工作示例。另请参阅这篇文章以获得很好的解释：smashingmagazine.com/2007/07/…
谢谢，我正在尝试。选择了一个{}； #sidebar .select了一个{}，它当然不能工作。谢谢我知道更好地理解嵌套过程，再次感谢
没问题。祝项目的其余部分好运。

标签： html css colors background-color

【解决方案1】：

是时候学习名为Specificity 的 CSS 高级主题之一了。

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

【讨论】：