一部の css ファイルが .border の代わりに div.border を使用して CSS のセクターをリストするのはなぜだろうと思っていました。div.footer {color:#000000;}
だけでなく、複数のセクターで使用されているのを見てきました.footer {color:#000000;}
助けてくれてありがとう。
一部の css ファイルが .border の代わりに div.border を使用して CSS のセクターをリストするのはなぜだろうと思っていました。div.footer {color:#000000;}
だけでなく、複数のセクターで使用されているのを見てきました.footer {color:#000000;}
助けてくれてありがとう。
この要素を指定する理由は 3 つあります。
クラスを複数のタイプの要素に適用しており、特定の要素のルールを追加またはオーバーライドする必要がある場合。
スタイルシートでコンテキスト情報を提供したい (通常は他の開発者向け)
別のクラスのスタイル ルールをオーバーライドするには、特別な仕様が必要です。
一般的に、一部のユーティリティ クラス (float や clears など) を除いて、#1 は悪い考えだと思います。Saas のようなプリプロセッサと mixin を使用することで、そのようなことをより適切に処理できると思います。
私が考える2番目のケースは、疑わしい価値があります。3 番目のケース ( に散水するのと同じように!important
) に遭遇した場合は、これを行う必要がないようにリファクタリングすることをお勧めします。いずれにせよ、それらが必要ない場合、セレクターに要素を追加するとマッチングが遅くなるだけであることに注意してください
作成している.borderクラスのルールを、テーブルコンテナーやその他の要素ではなく、divコンテナーにのみ適用する場合は、そのようにします。CSSセレクターに関する優れた記事はたくさんありますが、これは1つにすぎません。
と の違いを考えてみましょ<div class="border">Div with border</div>
う<p class="border">Paragraph with border</p>
。のスタイルは.border { ... }
これらの両方にdiv.border{ ... }
影響しますが、div のみに影響します。
前述のように、フッター クラスの前に div 要素を追加すると、スタイルがクラス「フッター」の div にのみ適用され、クラス「フッター」の他の要素には適用されないことが保証されます。
理想的には、特定の DOM 要素でのみクラスを使用することが確実にわかっている場合は、単に .footer を使用します。クラスの先頭に DOM 要素を追加する必要はなく、レンダリングのパフォーマンスに悪影響を及ぼします (実際にはあまり影響はありませんが、それでも非効率的です)。
ドットの前に「div」があるということは、セレクターがタイプ div の DOM 要素にのみ適用されることを意味します。
たとえば、「foo」というクラスがある場合、
.foo {
color:#ff0000;
}
テキストを赤で表示します。div.foo を使用すると、ディレクティブはそのクラスの div にのみ適用されます。