css priority_html/css_WEB-ITnose

CSS の優先順位

同じ要素にスタイルを設定する場合、スタイルの適用の優先順位は
インライン スタイル > ページ内スタイル > 外部スタイル
ID セレクター > であることは以前から知られていました。 selector >タグセレクター
一度に説明するのは非常に簡単です
しかし、実際には、フロントエンド開発を行う場合は、より詳細に知る必要があります
1. ! important は、絶対的に最高の優先順位を持ちます (この値を設定した後) ID セレクターやインライン スタイルに関係なく、シェイクすることはできません)
.set_size{width:inherit ! important;}
2. スタイルを記述するときに、誤って個別に指定したページ上のスタイルの前に外部スタイルを配置した場合, ページの内部スタイルよりも外部スタイルの優先度が高くなります。 これは主にCSSライブラリを導入する際に注意しなければならない点です
ただし、現時点ではまだインラインスタイルの優先度が高くなります。外部スタイルのクラスセレクター優先度
内部スタイルのIDセレクターは外部スタイルセレクターのクラスよりも高いままです
この時点では、インライン>アウトラインID>ページ内ID>アウトラインクラス選択>ページ内クラス選択となっています
3.*ワイルドカードセレクターは、ページ上のすべての要素を選択します。これは、このスタイルを一度適用したページ上のすべての要素を選択するのと同じです。
非常に強力ですが、正しい使用姿勢は、次のような子孫セレクターと一緒に使用することです。 as
.foot_thin *{color:blue;}

通常の状況では


インライン>ページ内 ID>外部 ID> ;ページ内クラス選択>外部クラス選択...

子孫セレクターはクラス セレクターよりも高い優先順位を持ちます
p span{color:red;}
子セレクターの優先順位は子孫セレクターの優先順位と同じです (同じ書き方の場合)
p >span{color:blue;}
同じCSSファイル内で、誰が前の行を書いたかによって、後続の行の優先度は変わりません。
優先順位は重複します
p.is > span{color:black;} このとき、優先順位はクラスセレクターの優先順位に追加されます

id>選択

256 クラスセレクターは 1 つの ID セレクターをキルします
http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html

決して忘れない目的 (決して忘れられない目的)
理解する必要がありますCSS を優先するのは、優れた Web サイトを構築するためにスタイルを適用する要素の冗長性、利便性、再利用性、効率的な選択を正確に合理化する必要があるためです (もちろん、パフォーマンスの最適化はバックエンドで重要です)
しかし、これは意味するものではありませんフロントエンドで実行されているもののパフォーマンスを考慮する必要がなく、フロントエンドのパフォーマンスをまったく考慮しないという考えは適切ですか?
答えは明らかです

効率が高い順に示すと、
ID セレクター (#myid)
クラス セレクター (.myclassname)
タグ セレクター (div, h1, p)
隣接セレクター (h1+p)
sub セレクター ( ul < li)
子孫セレクター (li a)
ワイルドカード セレクター (*)
属性セレクター (a[rel="external"])
疑似クラス セレクター (a:hover,li:nth -child)
ただし、 CSS フロントエンドを書くと、ほとんどの人は ID セレクターを使用できるほど素人ではありません
そして、疑似クラスは必要であり、一般的に使用されます

もっと詳しく読みやすくしてください
http://stevesouders.com/
http://www.tuicool .com/articles/INbuiq
http://csswizardry.com/2011/09/writing-efficient-css-selectors/ または http://www.w3cplus.com/css/css-selector-performance
http:// www.jianshu.com/p/268c7f3dd7a6