ホームページ  >  記事  >  ウェブフロントエンド  >  css cascading_html/css_WEB-ITnose について

css cascading_html/css_WEB-ITnose について

WBOY
WBOYオリジナル
2016-06-24 11:50:38878ブラウズ

「どの値を要素に適用するかを決定するとき、ユーザーエージェントは継承だけでなく、宣言の特異性や宣言自体の起源も考慮する必要があります。」 ??《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 段階のステートメントの重みは、降順で次のとおりです:

  1. 読者からの重要なステートメント
  2. クリエイティブスタッフからの重要なステートメント
  3. 一般的なステートメントクリエイティブスタッフ
  4. リーダーの通常宣言
  5. ユーザーエージェント宣言

2つのルールの重み、起源、具体性がまったく同じである場合、後で書かれた方が勝ちます。ドキュメントに含まれるルールは、インポートされたルール (@import) よりも重みが高くなります。

したがって、推奨されるリンク スタイルの順序は LVHA (:link,:visited,:hover,:active) です。同じ属性(色など)のスタイルを設定する場合、AHLV の順序で記述すると、リンクは最初に :link を見つけて AH を直接無視するため、ホバリングと応答の効果はありません。もちろん、結合疑似クラス (:visited:hover) を使用する場合は、この問題を心配する必要はありません。

カスケードルール

ソース>詳細性>宣言順序(メインスタイルシート>インポートスタイルシート)>継承

参考文献

「CSSの決定版ガイド」第3章 構造とレイヤー

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。