同じスタイルを持つ複数のクラスが異なる値

Question

私が優先されます

.padding-top { 
    10px; 
} 

.padding-upper { 
    1px; 
} 

<div class="padding-top padding-upper"></div> 

のようなものがありますか？無作為なのですか、ここに年代順がありますか？

私は、コードをテストし、私はそうのような順序入れ替えしようとした場合でも、唯一の1ピクセルに適用があることを確認しています

<div class="padding-upper padding-top"></div> 

のみ1ピクセルが適用されます。誰かが私にこれを啓発することはできますか？

Answer 1

はい、注文によって適用されます。

.padding-top { 
    padding-top: 10px; 
} 

.padding-upper { 
    padding-top: 1px; 
} 

div { 
    height: 100px; 
    background-color: red; 
} 

<div class="padding-top padding-upper"></div> 

それはあなたがクラスを宣言した方法を、時系列順で適用されます：あなたのクラスは（paddingプロパティが欠落しているもの）を適切に定義されていないので、これを試してみてください。 padding-topクラスが最初に宣言されているため、上書きされます。後に宣言されるクラスpadding-upperによって上書きされます。

宣言の順序を変更すると、div要素のスタイルも変更されます。しかし、classアトリビュートで注文を変更すると、スタイルは変わりません。

しかし、あなたは、あなたがそのプロパティに対して!importantで達成することができ、元の値を保持したい状況がある場合：

.padding-top { 
     padding-top: 10px !important; 
} 

.padding-upper { 
     padding-top: 1px; 
} 

を今すぐpadding-topプロパティの順序は重要ではありません。 !importantで装飾されているため、10ピクセルは常に適用されます。

Answer 2

実際、CSSは特異度に基づいて上書きされます。以下のスニペットで。 div.padding-upperは他よりも具体的です。詳細情報については：https://www.w3.org/TR/CSS21/cascade.html

.padding-top { 
 
padding:10px; 
 
width:20px; 
 
height:20px; 
 
background:red; 
 
} 
 

 
.padding-upper { 
 
padding:1px; 
 
width:20px; 
 
height:20px; 
 
background:red; 
 
} 
 

 
div.padding-upper { 
 
padding:100px; 
 
width:20px; 
 
height:20px; 
 
background:red; 
 
}

<div class="padding-top padding-upper"></div>

しかし、あなたの場合は、両方のセレクタは、同じレベルにあります。したがって、最近のルールが適用されます。

.padding-top { 
 
padding:10px; 
 
width:20px; 
 
height:20px; 
 
background:red; 
 
} 
 

 
.padding-upper { 
 
padding:1px; 
 
width:20px; 
 
height:20px; 
 
background:red; 
 
}

<div class="padding-top padding-upper"></div>

あなたはデフォルトの動作上のそれを上書きしたい場合は、!importantを使用する必要があります。

.padding-top { 
 
padding:10px !important; 
 
width:20px; 
 
height:20px; 
 
background:red; 
 
} 
 

 
.padding-upper { 
 
padding:1px; 
 
width:20px; 
 
height:20px; 
 
background:red; 
 
}

<div class="padding-top padding-upper"></div>

Answer 3

順序は関係ありませんが。複数発生の最後に宣言された値が使用されます。

Cssは書かれたとおりに動作します。つまり、あなたのhtmlで2つのクラスを取っている場合：

<div class="padding-upper padding-top"></div> 

CSSの最後に書かれているクラス：

.padding-top { 
10px; 
} 

.padding-upper { 
1px; 
} 

は関係なく、あなたのhtmlでそれらを交換する方法を最初に実行しませんが。以下は

宣言の順番にああsame-

.demo { 
 
    color: blue; 
 
} 
 

 
.demo1 { 
 
    color: red 
 
} 
 

 
.demo2 { 
 
    color: green 
 
}

<div class="demo demo2 demo1 ">Hello World!!</div>