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

我正在制作一个三个元素的工具栏菜单，它应该具有相同的样式，除了用作图标的不同背景图像。背景颜色不覆盖完全定义的背景属性

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中定义背景属性并且在单独的选择器中仅使用背景图像时，我遇到了同样的问题。

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

来源

2017-08-08 Nik

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

背景颜色声明不生效，因为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); 
}

（当你在它的一致性，我建议做同样与之前规则的缘故）

。

来源

2017-08-08 19:06:43 BoltClock

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

回答

相关问题