背景色不覆盖完全定义的背景属性。

Question

我正在制作一个由三个元素组成的工具栏菜单，它应该有相同的样式，除了作为图标的不同的背景图像。

HTML:

<div id="menu-handheld">
    <a href="page.php?stuff=things" id="menu-handheld-tab-start">Start</a>
    <a href="page.php?stuff=things" id="menu-handheld-tab-trends">Trends</a>
    <a href="page.php?stuff=things" id="menu-handheld-tab-recent">Recent</a>
</div>

CSS:

#menu-handheld {
    position: fixed;
    width: 100%;
    height: 3.8rem;
    bottom: 0;
    z-index: 100;
}

#menu-handheld-tab-start { background: rgb(0, 51, 51) no-repeat 50% 0.5rem/2rem url(img/icons/start.svg) }
#menu-handheld-tab-trends { background: rgb(0, 51, 51) no-repeat 50% 0.5rem/2rem url(img/icons/trends.svg) }
#menu-handheld-tab-recent { background: rgb(0, 51, 51) no-repeat 50% 0.5rem/2rem url(img/icons/recent.svg) }

[id|=menu-handheld-tab], [id|=menu-handheld-tab]:visited { /* common CSS */
    display: block;
    float: left;
    box-sizing: border-box;
    width: 33.33333%;
    height: 100%;
    padding-top: 2.5rem;
    color: rgb(102, 153, 153);
    font-size: 1rem;
    font-family: treme-extra-light;
    text-decoration: none;
    text-align: center;
    transition: background 0.3s ease;
}

[id|=menu-handheld-tab]:active, [id|=menu-handheld-tab]:hover {
    background-color: rgb(102, 153, 153); /* this does not work */
    color: rgb(0, 51, 51); /* this works fine */
}

正如我在代码中评论的那样，“悬停/:活动转换”在文本颜色上工作得很好，但在背景色上却完全不起作用。我认为这是我单独为每个元素使用的完全写出的背景属性的问题，因为当我试图在公共CSS中定义背景属性并且只在单独的选择器中使用背景图像时，我遇到了同样的问题。

我在这里做错什么了？为什么背景-颜色，或背景-任何与此相关的东西，都不能覆盖背景属性？我意识到我可以通过定义另一组三#菜单-手持选项卡选项卡{}选择器来解决我的问题，并写出一个新的完整背景定义，但这不是一个解决方案。

Answer 1

颜色声明生效，因为没有要覆盖的现有颜色声明。

背景颜色声明不会生效，因为ID选择器比属性选择器和伪类加在一起更具体。这是因为属性选择器总是没有ID选择器even when that attribute selector is specific to the id attribute那么具体。因此，包含ID选择器的每个规则都保留其背景速记声明，包括其颜色值。

通常，解决这一问题需要使用专用性攻击，甚至是使用!important，但在这种特殊情况下，您应该可以通过将#menu-handheld添加到选择器中(而且，还可以选择用更简单的a类型选择器替换属性选择器，因为没有#menu-handheld的其他子选择器)：

#menu-handheld a:active, #menu-handheld a:hover {
    background-color: rgb(102, 153, 153);
    color: rgb(0, 51, 51);
}

(为了保持一致性，我建议您在执行之前的规则时也这样做。)