ホームページ > 記事 > ウェブフロントエンド > css cascading_html/css_WEB-ITnose について
「どの値を要素に適用するかを決定するとき、ユーザーエージェントは継承だけでなく、宣言の特異性や宣言自体の起源も考慮する必要があります。」 ??《CSS決定版》
Specificity
インラインスタイル | 1,0,0,0 |
ID | 0,1,0 ,0 |
クラス、属性選択、擬似クラス | 0,0,1,0 |
タグ、擬似要素 | 0,0,0,1 |
組み合わせ文字、ワイルドカード | 0,0 ,0,0 |
1 html>body table tr[id="totals"] td ul >li {color:maroon;}/*0,0,1,7*/2 li#answer {color:navy;} /*0,1,0,1 (winner)*/
注: ! important は重要なステートメントであり、常に重要でないステートメントより優先されます。
継承
ほとんどのボックスモデルプロパティ(マージン、パディング、背景、境界線を含む)は継承できません。
継承される値には特別性はなく、専門性 0 (ワイルドカード) もありません。
ユーザーエージェントのハイパーリンク a にはデフォルトのスタイルがあり、継承されません。変更する必要がある場合は、元の青をカバーするために追加の a:link{color:inherit;} を記述する必要があります。
demo
1 <style type="text/css">2 *{color:gray;}3 #page{color:blue;}4 </style>
1 <h1 id="page">This is <em>central line.</em></h1>
注: このデモでは、ワイルドカード セレクターの無差別な使用によって引き起こされる継承の問題も示します。
重みと 出典
5 段階のステートメントの重みは、降順で次のとおりです:
2つのルールの重み、起源、具体性がまったく同じである場合、後で書かれた方が勝ちます。ドキュメントに含まれるルールは、インポートされたルール (@import) よりも重みが高くなります。
したがって、推奨されるリンク スタイルの順序は LVHA (:link,:visited,:hover,:active) です。同じ属性(色など)のスタイルを設定する場合、AHLV の順序で記述すると、リンクは最初に :link を見つけて AH を直接無視するため、ホバリングと応答の効果はありません。もちろん、結合疑似クラス (:visited:hover) を使用する場合は、この問題を心配する必要はありません。
カスケードルール
ソース>詳細性>宣言順序(メインスタイルシート>インポートスタイルシート)>継承
参考文献
「CSSの決定版ガイド」第3章 構造とレイヤー