背景色が完全に定義された背景のプロパティを上書きしない

Question

アイコンとして機能する異なる背景イメージを除いて、同じスタイリングを持つ3つの要素のツールバーメニューを作成しています。

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で背景プロパティを定義しようとしたときに同じ問題があったため、別のセレクタで背景画像のみを使用していたので、これは私が各要素を別々に使用している完全に書き出された背景プロパティの問題だと思います。

私はここで間違っていますか？何故、背景色や背景などが背景プロパティを上書きしないのですか？私は3つの＃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); 
} 

（あなたはそれに取り組んでいる一方で、一貫性のために、私は以前のルールと同じことをやってお勧めします）

。