CSS 顺序如何应用？答案

【问题标题】：How does CSS order apply?CSS 顺序如何应用？
【发布时间】：2018-07-12 15:04:56
【问题描述】：

假设我有一个包含 2 个类的元素，它们都将 padding-left 应用于它：

<section class="pad1 pad2">
    ...
</section>

然后在我的 .css 文件中

.pad1 {
  padding-left: 60px;
}


.pad2 {
  padding-left: 30px;
}

padding-left 将如何应用？

在这种情况下我应该知道哪些规则？

【问题讨论】：

最后添加的属性（样式表中的最后一行）将被应用。其他将被覆盖。 css-tricks.com/precedence-css-order-css-matters
CSS 代表 Cascading Style Sheets，所以答案就在名字本身，Cascading 意味着向下流动，所以发生的情况是 CSS 从上到下读取，这意味着最后添加的属性将是已应用，其他将被覆盖

标签： html css padding

【解决方案1】：

希望你能理解。

.pad1{
  padding-left:60px;
}
.pad2{
 padding-left:30px;
}
.pad3{
 padding-left:30px;
}
.pad4{
 padding-left:60px;
}

<section class="pad1 pad2">
  Hi, This is css padding solution.
</section>
 <section class="pad3 pad4"> 
  Hi, This is css padding solution. 
</section>

【讨论】：

【解决方案2】：

您的问题都是关于 CSS 选择优先规则的。首先您应该了解每个选择器的 CSS 优先级值。

我们通常用作 CSS 选择器类、ID、标签名称、内联等。每个选择器都有自己的优先级值，优先级表如下：

对于每个标签（a、div、p 等）选择器 = 1，
对于每个类和伪类（.class1、.class1:active 等）选择器 = 10，
对于每个 ID (#id) 选择器 = 100，
对于每个 内联样式 (<div style="color:red"></div>) 选择器 = 1000，
对于每个 !important (.class { color: red !important;}) 选择器 = Infinity。

假设现在你有一个如下的选择器：

 #nav ul a { color: gray; } = 100 (#nav) + 1 (ul) + 1 (a) = 102

现在来谈谈你的观点，你有 2 个类选择器 .pad1 和 .pad2，每个选择器值是 10 表示相等，那么哪一个可以工作？如果选择优先级相等，则最后一个将起作用，因此.pad2 将起作用，因为 CSS 解析器从上到下读取文档。但是，如果选择优先级不同，则在这种情况下，优先级更高的优先级无关紧要。

为了更好地理解，请看这里有更清晰的解释：https://css-tricks.com/specifics-on-css-specificity/

【讨论】：

【解决方案3】：

在这种情况下，最后一个 CSS 类总是优先：

如果.pad2 将是最后一个，那么它将覆盖上一个课程.pad1，如下所示：-

.pad1 {
padding-left: 60px;
}


.pad2 {
padding-left: 30px;
}

<section class="pad1 pad2">
This is class section
</section>

如果.pad1 将是最后一个，那么它将覆盖上一个课程.pad2，如下所示：-

.pad2 {
padding-left: 30px;
}

.pad1 {
padding-left: 60px;
}

<section class="pad1 pad2">
This is class section
</section>

【讨论】：

【解决方案4】：

CSS 规则应用于页面中的对象，这些对象按照它们在样式表中遇到的顺序匹配它们的选择器。但是使用 !important，该属性现在将优先考虑最新的重要值。

【讨论】：