Question

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

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

然后在我的.css文件中

.pad1 {
  padding-left: 60px;
}


.pad2 {
  padding-left: 30px;
}

如何应用padding-left？

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

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

Answer 2

您的问题仅与CSS选择优先级规则有关。首先，您应该了解每个选择器的CSS优先级值。

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

对于每个标签（a，div，p等）选择器= 1，
对于每个类和伪类（。class1，.class1：活动等）选择器= 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/

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

Answer 4

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

CSS顺序如何应用？

4 个答案: