CSSにおける複数のclassの優先度

2803 ワード

Webページで要素にスタイルを追加する場合、多くのclassプロパティが使用されます.
では、彼らの間の優先度関係はどのようなものですか.1つの要素が複数のclassを指定すると、classの優先度は指定された順序とは関係なく、classの定義順序と関係があります.ポスト宣言の優先度が高い.
たとえば、ボタンには、次のような一般的なプロパティが書かれています.
.bt {
	border: 1px solid;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: white;
}

つまり、私たちのボタンのデフォルトは上のスタイルです.特殊なボタンがある場合は、背景の色が赤で、他のスタイルの属性が変わらないことを望んでいます.specialを定義することができます.
.special{
	background-color: red;
}

このように、要素のclassプロパティを指定するときに、specialのスタイルがbtのスタイルを上書きすることをどのように決定しますか.
私が最初に書いたとき、私はこのように指定しました.
<button class="bt special">  button>

しかし、以前のものは上書きされず、順序を変更しました.
<button class="special bt">  button>

その後、まだ上書きされていないことに気づき、ネットで調べてみると、1つの要素が複数のclassを指定した場合、classの優先度は指定された順序とは関係なく、classの定義順序と関係があります.
それから私のcssファイルを見て、やはり私のbt定義はspecialの後で、それから私は彼ら二人の順序を変えて、specialはbtの中のスタイルの属性をカバーすることができます.
したがって、スタイルプロパティを定義するときは、必ず最も基本的なものを一番前に置く必要があります.これにより、特別な要求がある場合、前のプロパティを上書きすることができます.