何らかの理由で、「a:link」ルールがリンクに適用された特定のルールを上書きしています。
a:link {color: red ;}
.button {color: white; background: red;}
<a class="button" href="blah.com">Hello</a>
最終結果は、上記のリンクには赤いテキストと赤い背景がありますが、.button ルールで指定されているように色を白にしたいのですが
私は何か間違ったことをしていると感じています...何かアイデアはありますか?
a:linkセレクターは よりも特異性が高いため、両方が適用される要素の.button場合 (例のように)、前者が優先され、テキストが赤になります。
ボタンに頻繁にリンクが含まれることがわかっている場合は、それらのリンクを明示的にスタイル設定するだけです。
a:link {color: red ;}
.button, a.button:link {color: white; background: red;}
または、セレクターの特異性を人為的に増やして、.button少なくとも の特異性と等しくすることができa:linkます。
a:link {color: red ;}
html .button {color: white; background: red;}
このソリューションは非常に脆く、一見冗長なhtml部分が重要な役割を果たしていることがすぐにはわからないため、お勧めしません。
別の可能な解決策は を使用すること!importantですが、特に核を使用しない完全に優れた代替手段があるため、これも避けます。
2 番目のルールを次のように変更できます。
.button {color: white !important; background: red;}
に注意してください!important。そのルールの優先度が自動的に高くなります。
a:linkより具体的だからです.button。CSS のより具体的な規則は、より具体的でない規則よりも常に優先されます。
次のいずれかを行うことができます (a) !important を次のように色宣言に追加します...
.button {color: white !important; background: red;}
... または (b).buttonこのように、セレクターをより具体的にします...
a.button {color: white; background: red;}
Jsfiddle の例: http://jsfiddle.net/ykHVa/
個人的には (a) よりも (b) の方が好みです。なぜなら、!importantCSS は時間の経過とともにデバッグが困難になる可能性があるからです。
:link を持つルールは、それに続く :link を持つ別のルールによってのみ無効になります。同様に具体的なルールが必要です。
a:link {color: red ;}
.button,.button:link {color: white; background: red;}
他の回答者が指摘したように、 !important を使用することもできます。ただし、後で新しいルールを追加しようとするときに混乱を招く可能性があるため、これは理想的ではありません。