CSS の軽量原則 - sub-selectors_html/css_WEB-ITnose の乱用を避ける

以下に示すように、CSS によって設定されたスタイルをカスケードできます [コード 1] [コード 1]

<style type="text/css">    span{font-size: 40px;}    .test{color:red;}</style><span class="test">CSS的低权重原则</span>

「CSS 低重量原則」を「フォント」に変更できます-size:40px」スタイルを選択すると、「color:red」スタイルを取得できます。 2 つの異なるセレクターによって設定されたスタイルが競合した場合はどうなりますか?以下に示すように [コード 2] [コード: CSS カスケード競合]

<style type="text/css">    span{font-size: 40px;color:green}    .test{color:red;}</style><span class="test">CSS的低权重原则</span>

「CSS の低重量原則」の色は何になりますか? 「span」に設定された「color:green」ですか、それとも「.test」に設定された「color:red」ですか？これには CSS セレクターの重みが関係します。

CSS セレクターは重み付けされます。異なるセレクターのスタイル設定が競合する場合、より重み付けされたセレクターによって設定されたスタイルが使用されます。重みのルールは次のとおりです。HTML タグの重みは 1、クラスの重みは 10、id の重みは 100 です。たとえば、p の重みは 1、「div em」の重みは 1+ です。 1=2, "strong.demo" ""#test.red" の重みは 10+1=11、"#test.red" の重みは 100+10=110 です。

[コード2]、セレクタースパンの重みは1、「.test」の重みは10なので、「CSS低重み原則」の色は赤になるはずです。

しかし、次のような場合はどうなるでしょうか [コード 3]。

<style type="text/css">span{font-size: 40px;}.test{color:red;}.test2{color: green}</style><span class="test test2">CSS的低权重原则</span>

span タグには、test と test2 という 2 つのクラスがあり、それらの重みは両方とも 10 です。では、「CSS の低重みの原則」はどの色にすべきでしょうか。 CSS セレクターの重みが同じ場合、スタイルは近接原則に従い、後で定義されるセレクターのスタイルが使用されます。 [コード3]はtest2の後に定義されているため、「.test2」を使用して色を緑色に設定します。

[コード4]のように「.test」と「.test2」の定義の位置を変更すると

<style type="text/css">span{font-size: 40px;}.test2{color: green}.test{color:red;}</style><span class="test test2">CSS的低权重原则</span>

「CSS低重み原則」の色が変わります赤になります。

近接性の原則は、クラス名の順序ではなく、セレクターの順序を指すことを強調する必要があります。CSS の低重みの原則CSS の低重量原則 と違いはありません。

CSS セレクターの重みは見落とされやすい問題です。しかし、実はセレクターの重さには十分注意しておかないと、思わぬちょっとしたトラブルが起こることも少なくありません。たとえば、次の [コード 5]

<style type="text/css">#test{font-size: 14px;}</style><p id="test">CSS的选择符权重很重要</p>

では、「非常に重要」という 3 つの単語を赤色で設定する必要があります。どうすればよいでしょうか。オプション 1、[Code 6]

<style type="text/css">#test{font-size: 14px;}#test span{color: red}</style><p id="test">CSS的选择符权重<span>很重要</span></p>

などのサブセレクターを使用します。 オプション 2、[Code 7]

<style type="text/css">#test{font-size: 14px;}.font{color: red}</style><p id="test">CSS的选择符权重<span class="font">很重要</span></p>

などの新しいクラスを作成します。多くのエンジニアは、次の使用を推奨します。オプション 1。サブセレクターを使用すると、新しいクラスの追加を避け、HTML コードをより簡潔にすることができます。ただし、この時点でニーズが変化した場合は、[コード 8] <🎜 などの新しい単語を追加する必要があります。 >

<style type="text/css">#test{font-size: 14px;}#test span{color: red}</style><p id="test">CSS的选择符权重<span>很重要</span>，我们要小心处理</p>

では、「取り扱い注意」を緑色に設定する必要があります。これは、[コード 9] のように実行できます。

<style type="text/css">#test{font-size: 14px;}#test span{color: red}.font{color:green}</style><p id="test">CSS的选择符权重<span>很重要</span>，我们要<span class="font">小心处理</span></p>

取り扱い注意は緑色に設定されると思っていましたセレクターのフォントによって異なりますが、セレクターの重みが高い「#test Span」が赤に設定されており、サブセレクターが新たに追加したコードに誤って影響を及ぼします。期待に応えたい場合は、コード [9] に従って

<style type="text/css">#test{font-size: 14px;}#test span{color: red}            /* 选择符权重为100+1=101 */#test .font{color:green}         /* 选择符权重为100+10=110 */</style><p id="test">CSS的选择符权重<span>很重要</span>，我们要<span class="font">小心处理</span></p>

を書き直す必要があります。また、オプション 2 を使用するとどうなるでしょうか。

<style type="text/css">#test{font-size: 14px;}.test{color: red}            /* 选择符权重为100+1=101 */.font2{color:green}         /* 选择符权重为100+10=110 */</style><p id="test">CSS的选择符权重<span class="font">很重要</span>，我们要<span class="font2">小心处理</span></p>

サブセレクターが使用されていないため、新しいコードを追加して新しいクラスをハングすることで、スタイル設定を正常に完了できます。

サブセレクターを使用すると、CSS セレクターの重みが大きくなり、HTML 構造が非常に安定していると確信できない限り、スタイルが上書きされる可能性が低くなります。再度変更されることはありません。子セレクターを使用してください。スタイルを簡単にオーバーライドして保守性を向上させるには、CSS セレクターの重みをできるだけ低くする必要があります。

使用するサブセレクターが少ない場合は、より多くのクラスを追加する必要があります。Web 標準が普及した初期の頃、多くのエンジニアは、サブセレクターを使用できるのであれば、クラスを追加するのは悪いことだと考えていました。授業の実践は「ポリクラス症候群」と呼ばれます。何度も練習した結果、複数のクラスにはそれほどデメリットはないと思います。むしろ、サブセレクターを使用するよりも、新しいクラスを追加する方がメンテナンスに有利です。