Question

我有类似

的东西

.padding-top {
    10px;
}

.padding-upper {
    1px;
}

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

哪个优先？它是随机的还是按时间顺序排列？

我已经测试了代码并检查了只应用了1px，即使我尝试交换类似的顺序，所以：

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

仅应用1px。有人可以在这个上启发我吗？

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-top

它将按时间顺序应用于您如何声明类。因为您首先声明了padding-upper类，所以它将被覆盖。它将被后面声明的类div覆盖。

如果更改声明的顺序，class元素的样式也将更改。但是，如果您更改.padding-top { padding-top: 10px !important; } .padding-upper { padding-top: 1px; }属性中的顺序，则样式将保持不变。

但如果你想保持原始价值的情况，你可以使用!important来获得该属性：

padding-top

现在订购!important属性并不重要。将始终应用10px，因为它使用switch进行修饰。

Answer 2

实际上，css将根据特异性水平覆盖。在下面的代码片段中。 div.padding-upper比其他人更具体。有关详细信息：https://www.w3.org/TR/CSS21/cascade.html

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

但在你的情况下，两个选择器都在同一级别。因此，最近的规则将被应用。

＆＃13;

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

＆＃13;

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

＆＃13;

如果要覆盖上述默认行为，则必须使用!important。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

订单确实很重要。将采用多次出现的最后声明值。

Css按照它的编写方式工作。所以如果你在你的html中学习两门课程：

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

最后写在css中的类：

.padding-top {
10px;
}

.padding-upper {
1px;
}

无论你如何在你的html中交换它们，都会先执行。

下面是一个相同的简单示例 -

＆＃13;

.demo {
  color: blue;
}

.demo1 {
  color: red
}

.demo2 {
  color: green
}

＆＃13;

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

＆＃13;

具有相同风格但价值不同的多个类

3 个答案: