背景顏色不覆蓋完全定義的背景屬性

我正在製作一個三個元素的工具欄菜單，它應該具有相同的樣式，除了用作圖標的不同背景圖像。背景顏色不覆蓋完全定義的背景屬性

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

背景顏色不覆蓋完全定義的背景屬性

回答

相關問題