スタイルシートでの CSS スタイルのオーバーライド順序の例を共有する

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 が表示されます。

Css コード

.class1 {  
    color: black;  
}  

.class2 {  
    color: red;  
}

要素でクラスを指定する場合は、class="class2 class1" を使用して指定します。要素 class2 の後ろにランクされていますが、スタイル シート ファイルでは class1 が class2 の前にあるため、この時点では依然として class2 の優先順位が高く、色の属性は黒ではなく赤です。

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

CSS コード

.class1 {  
    color: black !important;  
}  

.class2 {  
    color: red;  
}

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

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

1. 将border从#navigator中拿出来，放到一个class .block中，而.block放到.current_block之前：

Css代码  

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
}  

.block {  
    border: solid 2 #EEE;  
}  

.current_block {  
    border: solid 2 #AE0;  
}

 需要莫仁为#navigator元素指定class="block"

 

2. 使用!important:

 Css代码  

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

.current_block {  
    border: solid 2 #AE0 !important;  
}

以上がスタイルシートでの CSS スタイルのオーバーライド順序の例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。