多類我有類似具有相同的風格，但不同的值
.padding-top {
10px;
}
.padding-upper {
1px;
}
<div class="padding-top padding-upper"></div>
將被優先考慮？這是隨機還是按照時間順序排列？
我已經測試的代碼並檢查只有1px的應用，即使我嘗試互換像這樣的順序：
<div class="padding-upper padding-top"></div>
只有1px的應用。有人能給我啓發一下嗎？
是的，它是按順序應用的。試試這個，因爲你的類沒有定義正確（缺少padding屬性）：
.padding-top {
padding-top: 10px;
}
.padding-upper {
padding-top: 1px;
}
div {
height: 100px;
background-color: red;
}
<div class="padding-top padding-upper"></div>
它將由按時間順序排列你如何聲明的類應用。因爲你首先聲明瞭padding-top它將被覆蓋。它將被後面聲明的類padding-upper覆蓋。
如果更改聲明的順序，則div元素的樣式也會更改。但如果您在class屬性中更改訂單，則樣式將保持不變。
但如果你有，你要保持原有的價值，你可以用!important實現該屬性的情況：
.padding-top {
padding-top: 10px !important;
}
.padding-upper {
padding-top: 1px;
}
現在爲了padding-top財產無所謂。 10px將始終應用，因爲它用!important裝飾。
實際上，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>順序很重要。將採用多次出現的最後聲明值。
Css按其寫入方式工作。所以，如果你正在你的HTML兩類：
<div class="padding-upper padding-top"></div>
被最後在CSS編寫的類：
.padding-top {
10px;
}
.padding-upper {
1px;
}
將執行先不管你怎麼交換他們在你的HTML。
下面是各項─
.demo {
color: blue;
}
.demo1 {
color: red
}
.demo2 {
color: green
}<div class="demo demo2 demo1 ">Hello World!!</div>
哦申報事項的順序一個簡單的例子。非常感謝你，現在變得更加清晰。 – Cosytyle