CSS セレクターの重みの理解（個人テスト）

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
div.ui_info {フォントサイズ: 16px;}
.ui_info {フォントサイズ: 14px;}
</スタイル>

コードをコピー

コードは次のとおりです。

上記の例では、最終的な表示効果は font-size: 14px; ではなく font-size: 16px になります。
このセレクタの組み合わせには、判断するための簡単な方法があります。
0,0,0,0
最初の数字はラベルに書かれたスタイルを表します。例えば、

コードをコピー

コードは次のとおりです。

2桁目はIDセレクタを表します（例: #demo {}）
3桁目は、クラス名 (.demo {}) または疑似クラス (:hover) または属性セレクタ [rel="xx"] を表します。
4桁目はタグセレクター p {} を表します。
では、最初の例で練習してみましょう。

コードをコピー

コードは次のとおりです。

div.ui_info {フォントサイズ: 16px;}

重みは0,0,1,2です

コードをコピー

コードは次のとおりです。

.ui_info {フォントサイズ: 14px;}

重みは0,0,1,1です
結果: 0,0,1,2 > 0,0,1,1 なので、font-size: 16px が表示されます。
補足: !important は最も重みが高いため、判断する必要はありませんが、IE-6 ブラウザではバグが発生します。
例：

コードをコピー

コードは次のとおりです。

p {フォントサイズ: 18px !重要;フォントサイズ: 12px;}

IE-6 ブラウザでは、font-size: 12px が表示されます。インターネット上の情報には、IE-6 は !important をサポートしていないと記載されていますが、これは誤りです。
例を見てみましょう:

コードをコピー

コードは次のとおりです。

p {フォントサイズ: 18px !重要;}
フォントサイズ: 12px;

IE-6 では font-size: 18px と表示されるので、IE-6 は !important をサポートしていますが、パフォーマンスが少しおかしくなります。おかしなのは、!important 属性が同じ名前の後続のスタイルによって上書きされることです。
たとえば、例 p {font-size: 18px !important;font-size: 12px;} では、font-size: 12px が font-size: 18px !important を上書きします。
この癖を使えば、CSS_hackを使わずにIE-6で「min-height」を実装できる。

コードをコピー

コードは次のとおりです。

p { 最小高さ: 50px; 高さ:自動 !重要; 高さ:50px;}

<<: Kylin 4.0.2 (Ubuntu) でブートパーティションを拡張するプロセスの紹介

>>: MySQLチュートリアルではストアドプロシージャを徹底的に理解します