css - CSSリンクの厄介な問題

Question

さて、私はすでに私のリンクを次のようにスタイル設定しました：

a:link{ color: red; }
a:visited{ color: red; }
a:hover{ color: blue; }
a:active{ color: red; }

a { text-decoration: none; }

これで、フッターセクション#footerもあり、その中のすべてのリンクに次のように異なる色を適用したいと思います。

#footer a:link{ color: green; }
#footer a:visited{ color: green; }
#footer a:hover{ color: yellow; }
#footer a:active{ color: green; }

問題は、その#footer内に.buttonのクラスとのリンクもあることです。

.button { color: cyan; background: gray; border: none; }

また、フッター内のリンクのスタイルは、ボタンの「色」を上書きするため、シアンではなく緑色になります。

フッターリンクのスタイリングをCSSの下部に配置しましたが、機能しませんでした。

ボタンの「色」に「！important」を使用できることはわかっていますが、これを回避する別の方法があるかどうかを知りたかっただけです。ありがとう！

score 2 · Accepted Answer

これを試して：

#footer a.button:link { color: cyan; background: gray; border: none; }

より具体的であるため、他のスタイルをオーバーライドします。これは、IDが「footer」の要素内にあるボタンのクラスを持つ「未訪問」の「a」要素を対象としています。

CSS-tricksはCSSの優れたリソースであり、これに関する優れた記事があります：http: //css-tricks.com/specifics-on-css-specificity/

score 1 · Accepted Answer

特異性の問題が発生しています。

はルール#footer a:linkよりも具体的であるため.button（103対10）、それをオーバーライドします。

buttonしたがって、フッター内のsに対してより具体的なルールが必要です。これは、たとえば、次のようになります。

.button, #footer a.button:link { color: cyan; background: gray; border: none; }

score 0 · Accepted Answer

特異性は十分に高くありません。あなたはそれをするために接頭辞.buttonを付けることができます#footer。

score 0 · Accepted Answer

ボタンのフルパスを使用してみてください。

#footer a.button:link { color: cyan; background: gray; border: none; }

または、両方を保存することもできます

.button,
#footer a.button:link { color: cyan; background: gray; border: none; }

score 0 · Accepted Answer

Idは、クラスよりも強力なセレクターです。

だからあなたは使用しなければなりません #footer .button

たとえば、このようなマークアップでは

<div class="red" id="green">Some text</div>

そして次のcssで：

#green{color: green}
.red{color:red }

クラス.red宣言がスタイルシートの#greenよりも遅い場合でも、結果は緑色になります。

Idルールは、！importantまたはinlineスタイルによって上書きされる可能性があります。

こちらのcodepenでこれを確認してください

5 に答える 5