CSSスタイルシートのスタイルの優先順位

CSS を作成するプロセスでは、特定の制限が常に機能しないことがあります。これには、次のような CSS スタイルの適用範囲の問題が関係します

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0;
}

一部の教科書 (w3schools など) を見ると、CSS の順序は「要素」「ファイルヘッダーのスタイル」>「ファイルヘッダーのスタイル要素」>「外部スタイルファイル」ですが、スタイルファイル内の複数の同一スタイルの優先順位がどのように配置されるかについては詳細な説明がありません。テストして検索を続けた結果、優先順位は次のように配置されていることがわかりました:

1. スタイル シートの要素セレクターの選択が正確であればあるほど、スタイルの優先順位が高くなります:

ID で指定されたスタイルselector> クラス選択 セレクターで指定されたスタイル > 要素タイプ セレクターで指定されたスタイル

したがって、上記の例では、.current_block が最新の追加であっても、#navigator のスタイルの優先順位は .current_block の優先順位よりも高くなります。動作しないでしょう。

2. 同じ種類のセレクターで指定されたスタイルの場合、スタイル シート ファイルの後の方が優先されます。

ここでは、スタイル シート ファイルの後の方が優先されることに注意してください。スタイルシートファイルの要素クラスの出現順序。例えば、スタイルシートでは .class1 の後に .class2 が現れます:

.class1 {
    color: black;
}
.class2 {
    color: red;
}

要素でクラスを指定する場合は、class="class2 class1" で指定しますが、このとき要素内で指定する場合は class2 の後に class1 を指定します。ただし、スタイル シート ファイルでは class1 が class2 よりも前にあるため、この時点でも class2 の優先順位が高く、色の属性は黒ではなく赤です。

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

3. 特定のスタイルの優先順位を高くしたい場合は、! important を使用して次のように指定できます。

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

この時点では、クラスは赤の代わりに黒を使用します。

最初に遭遇した問題には 2 つの解決策があります:

1. #navigator から境界線を取り出してクラス .block に置き、.current_block の前に .block を置きます:

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
}
.block {
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0;
}

Moren が #navigator 要素に class="block" を指定するために必要です

2. !重要:

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0 !important;
}

CSS スタイル シートのスタイルの優先順位に関連するその他の記事については、PHP 中国語 Web サイトに注意してください。 ！