誤解されやすいフロントエンドの CSS セレクターの重み計算と CSS インライン スタイルのトリック_html/css_WEB-ITnose

私が大学にいた頃、専門的な Web デザインの本で、CSS セレクターの重みの計算について説明されていたのを思い出します。ID は 100、クラスは 10、HTML タグは 5 などで、それらすべての合計が比較されます。 。 。
私が言いたいのは、これは本当に誤解を招き、有害であるということです。

最近、フロントエンドグループでも上記と同様の見解を持つ奇妙なチャットを見つけました。本当に***です

実は、Mai Shiさんが共有した技術記事を読んだのもかなり前のことです。 Tencent ISUX のフロントエンドエンジニア (個人サイトは期限切れなので掲載しません) で、実際の CSS セレクターの重み計算について学びました。

以下は、外国の文書から翻訳したCSSセレクターの重み計算の本質です（W3Cによって与えられた計算ルールを思い出してください）

ステートメントがセレクターではなくスタイル属性から来ている場合、それは1またはa=1としてカウントされます(in the HTML document, the value of the element "style" is a stylesheet rules. このルールにはセレクターがないので、a=1, b=0, c=0, and d=0)
セレクター内の ID 属性の数は、b としてカウントされます
セレクター内の他の属性および疑似クラスの数は、c としてカウントされます
セレクター内の要素および疑似要素の数は、d としてカウントされます
優先順位はのみに基づいていますセレクターのフォーム、特に「フォーム [id=p33] のセレクター」は、たとえ定義にはIDが含まれています
いくつかの例:

 1 * {}     /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */ 2 li {}     /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */ 3 li:first-line {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */ 4 ul li {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */ 5 ul ol+li {}     /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */ 6 h1 + *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */ 7 ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */ 8 li.red.level {}     /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */ 9 #x34y {}     /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */10 style=""     /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 */

[備考]
:first-line pseudo-element
[rel=up] その他の属性

これらを理解すれば、「」という疑問はもう湧かないはずです。 11 クラスと 1 つの ID」で、どちらが優先されますか? a、b、c、d はそれぞれの位置の数字の単なる累積であり、レベルをスキップすることはありませんので、疑問があります。

実は重要なことがあります。ここに欠けています、それは重要です。これは魔法のことです~

最初に強調すべきことは、height:100px のような !payment; の使用です。 important です。実際、追加しなくても問題ありません。笑~

important は css 属性値に追加されるため、以前の重みの計算がばかげてしまいます。 、これまでの努力はすべて無駄になり、重要な別の属性値がそれをカバーするように宣言されない限り、インライン スタイルの重みはそれよりも大きくなりません（CSS 属性値の順序によって決定されることに注意してください） read)

例えば、 h1{height:100px ! important;} で高さの値を 200px に上書きしたい場合は、その後に h1{height:200px ! important;} を追加します

一般的には、 ! important 値の上書きです。大規模なプロジェクトでは、ファイルが最初に読み込まれるか最後に読み込まれるかを予測するのは困難です。特にパブリック CSS ファイルの場合は、追加することはお勧めできません。この特別な値

これに関して、追加の点について触れておきたいのですが、CSS スタイルは右から左に読み取られて解析されるため、 class1 .class2 のようなセレクターの場合は間違って記述しないでください。 class3{} の場合、ブラウザは一意の ID により高速に検索しますが、実際には遅くなります。3 つのレベルを維持し、あまり多くのレベルを持たないことが最善です。

また、多くの人は、.class1.class2{} のような交差セレクターを、通常は js と組み合わせて作成して、表示効果を作成することを好みます。重要なのは、IE6 はこの種の交差セレクターをサポートしていないということです。p.class1{} のような標準の複合セレクターは、IE6 などの以前のバージョンのブラウザーでのみ完全にサポートされます。 （追記：会社の同僚がこの罠を踏んで、私のCSSコードをIE6で上書きしてしまいました。ずっとチェックしてた？？やっと真実を知った時は涙が出ました）

実際、もしあなたが上記のことを理解すると、あなたの CSS レベルは入門レベルとみなされます (はい、あくまで入門レベルです)。

次に、非常に実践的なスキルについて話しましょう（実際には、上記の基礎知識の統合です）:

シナリオ: コンテンツの ID を持つ div にマウスをホバーすると、高さを auto から 30px に変更します。

1. 新人レベルの書き方

1 $("#content").hover(function(){2     $(this).css({"height":"30px"});3 },function(){4     $(this).css({"height":"auto"});5 });

では、この div 自体の高さが auto ではない場合、そのデフォルトの height 属性値を知る必要がありますか?

だから、この書き方は学術用語ではハードコーディングとか強結合とか言うんです。

2. 普通の書き方

1 .content_normal{height:20px;} /*默 认应用的样式*/2 .content_change{height:30px} /*hover时候应用的样式*/

1 $("#content").hover(function(){2     $(this).addClass("content_change");3 },function(){4     $(this).removeClass("content_change");5 });

3. 応用的な書き方

var $extStyle = $("head").find("#extStyle");$("#content").hover(function(){        //向头部插入一个内链样式表    if($extStyle.length < 1){         var styleElem = document.createElement("style");         styleElem.setAttribute("type", "text/css");         styleElem.setAttribute("id", "extStyle");          $("head").append(styleElem);         $extStyle = $("head").find("#extStyle");      }         $extStyle.append("#content{height:30px;}");},function(){     $extStyle.empty();});

3 番目の書き方の利点は、何をしても簡単に変更できることです。ニーズがどのように変化するか。また、最初の書き込みメソッドに存在する style="height:auto;" という状況を回避できます。 height:auto; は致命的な場合があるため、プロジェクトでそのような問題に遭遇しました。

欠点は、head にスタイル ノードを挿入する必要があることで、小さなニーズには少し面倒です。ただし、大規模なプロジェクトでは、一時的に変更されたスタイル データの挿入を担当するスタイル ノードを内部的にデフォルト設定できるため、コードを汚すことなく簡単に削除できます。

最後に、非常に重要な点について触れておきます。IE では、スタイル ノードの最大数は 31 です。それ以上あると認識されません (笑)