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 */
}

正如我在代码中所评论的那样：hover /：active转换在文本颜色上工作正常，但在背景颜色上根本不工作。我认为这是一个完全写出的背景属性的问题，我分别用于每个元素，因为当我尝试在常见CSS中定义背景属性并且仅在单独的选择器中使用背景图像时，我遇到了同样的问题。

我在这里做错了什么？为什么背景颜色或背景颜色无法覆盖背景属性？我意识到我可以通过定义另外一组三个#menu-handheld-tab-stuff {}选择器并写出新的完整背景定义来解决我的问题，但这不是解决方案。

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);
}

（虽然你正在考虑它，为了保持一致性，我建议你做同样的规则。）

background-color不会覆盖完全定义的背景属性

1 个答案: