多类我有类似具有相同的风格，但不同的值
.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