CSS Div＆amp; Classes样式优先级

Question

我一直在学习一些HTML＆amp; CSS最近，我有一个关于CSS样式优先级如何工作以及在遇到冲突情况时应用哪种样式的问题。

让我们看看以下代码：

.container {
  color: green;
}
.things {
  color: blue;
}
p#item {
  color: yellow;
}
#item {
  color: orange;
}
.things .container {
  color: brown;
}
p.things {
  color: red;
}

<div class="container things">
  <p>A</p>
  <p id="item">B</p>
  <div class="container">C</div>
  <p class="things">D</p>
</div>

现在根据我们提供的答案键，不同元素的颜色为：A-Blue，B-Yellow，C-Brown和D-Red。现在B＆amp; D，我觉得很容易理解。但是，我不明白A＆amp; A C得到了他们所做的颜色。我想基本上我很难理解为什么A＆amp; C的颜色不一样。有人可以解释这一切是如何运作的吗？

由于

Answer 1

CSS是级联样式表，表示样式从顶部到底部应用。第一个<div class='container things'>首先从容器类中获取color:green样式，但然后由事物类覆盖color:blue。现在，因为该div中的第一个<p>标记没有被任何CSS作为目标，它会从其父级继承颜色，这是蓝色，因此A变为蓝色。

对于C，以C为目标的最低选择器是.things .container选择器，它使用容器类定位元素，这些元素位于带有thing类的元素内部，导致C为棕色。

另请查看其他答案，了解有关特异性的信息。

Answer 2

让我们一个接一个地进入风格，

默认情况下，您可以将所有颜色设置为绿色

 .container {
        color: green;

    }

现在你覆盖（只有那些同时具有container和things类的元素）为蓝色，

.things {
    color: blue;

} 

（在你的情况下，它是父div，所以一切都会有蓝色）所以包括A和C在内的所有内容都变为蓝色

所以在这里，

A-> Blue
B-> Blue
C-> Blue
D-> Blue

现在你将颜色内的容器（因此只有C满足这个条件）的颜色涂抹到眉毛上，因此c是棕色的。    .things .container {         颜色：棕色;

}

所以在这里，

A-> Blue
B-> Blue
C-> brown
D-> Blue

此外，

p#item{
    color: yellow;

}
#item {
    color: orange;

}, 

虽然#item最后是橙色，但p＃项目的specificity仍然最多，因此B的颜色变为黄色

所以它变成了，

A-> Blue
B-> yellow
C-> brown
D-> Blue

最后你给出了这种风格，

p.things {
    color: red;

}

只有D满足此规则，因此D变为红色

所以最后的结果是，

A-> Blue
B-> yellow
C-> brown
D-> red

Answer 3

从上到下应用

CSS个样式，如果您在.container类的1个元素上应用多个类，则首先应用由{{1}覆盖的color:green来自color:blue类。

首先，您应用了最初在所有DOM元素上应用.things的{​​{1}}类。然后.container类通过应用＆＃39; color：blue＆＃39;来覆盖样式。它显示了蓝色的A.然后B从color:green类中取出样式并将其.things更改为.item，然后再次在包含C的color:blue上应用color:yellow类，这将覆盖再次.container到<div>。最后，您将color:blue课程应用到color:green，并.things覆盖了<p>。

但是如果您对CSS类的顺序感到困惑，可以通过在样式结尾处使用color:blue强制应用所需的颜色来覆盖样式。

就像你的容器类一样：

color:blue

它将在A和C上应用相同的颜色，无论类顺序或样式如何，它总是将绿色应用于包含多个类的元素，包括!important。和其他课程。

<强> Working Fiddle Here.

修改

如果您希望样式不被任何类覆盖，并且始终应用您使用.container { color: green !important; } 定义的样式（表示包括颜色在内的所有样式）。

Answer 4

CSS特异性表示强者永远胜利。 查看他的链接来计算哪些ruke比其他更强：css-specificity

事实上， Id 强于类强于元素。 样式元素（内联）强于 Id ，并且再次强于inlin：！important; 所以

重要！; ＆GT;内联＆gt; Id＆gt;课程＆gt;元素。您可以组合多个id，类或元素来实现差异。

如果某些规则完全相同，则最新的规则具有优势。

看到这张有趣的图片来理解它：

Answer 5

简单来说，更具体的一个被选中，例如，如果你添加这些代码行：

 <p class="things" id="ye">D</p>
 p.things#ye{color:black}

D会变黑，因为你有更多选择器。