ここで同様の質問を見てきましたが、私のケースに固有の質問は見つかりませんでした。
この記事を正しく読んだ場合: http://css-tricks.com/specifics-on-css-specificity/
何が起こっているのか、私には意味がありません。これが局所性、継承、または特異性によるものかどうかを誰かが説明できますか? 関係のない CSS はすべて削除しました。
CSS
a:link {font-size:0.875em;color:#005984}
.button {color:#fff}
HTML
<a class="button">Awesome call to action</a>
白ではなく青のテキストのボタンになってしまいます。さて、a は要素なので、.button クラスよりも具体性が低いはずですよね?
御時間ありがとうございます。
これは特異性によるものaです。要素型セレクターはクラス セレクターほど具体的ではありませんが、:link同じようにクラスに固有の疑似クラスを伴います.button。したがって、タイプ + 疑似クラスは、クラスよりも具体的になります。
要素に適用されていることがわかる親要素スタイルがないため、ここでは継承は行われません。継承とは、親要素からスタイルを採用することを指します。リンクが白ではなく青で表示されている場合、それは継承ではなくカスケードが機能していることを示しています。
ローカリティは CSS 用語ではない (少なくとも用語集にはありません) ので、それが何を意味するのかわかりません。
Call-to-Action ボタンを白くする必要がある場合は、aセレクターも指定するだけで、セレクターが同様に具体的になり、最後の宣言が優先されます。
a:link {font-size:0.875em;color:#005984}
a.button {color:#fff}
セレクターの特異性は、次のように計算されます。
- セレクター内の ID セレクターの数をカウントする (= a)
- セレクター内のクラス セレクター、属性セレクター、および疑似クラスの数をカウントする (= b)
- タイプの数をカウントするセレクターおよびセレクター内の疑似要素 (= c)
- ユニバーサル セレクターを無視する否定疑似クラス内のセレクターは、他のものと同様にカウントされますが、否定自体は疑似クラスとしてカウントされません。
3 つの数 abc を (基数が大きい数体系で) 連結すると、特異性が得られます。
そう：
a:link
- a=0
- b=1
- c=1
- 結果 = 011
.button
- a=0
- b=1
- c=0
- 結果 = 010結果:
a:linkより高いです.button。
修正:とにかくタグ:link以外では機能しないため、指定は冗長です。代わりに を使用すると、問題が解決します (ただし、は の後に定義されています)aa:link:link.button :link