类选择器及其效果

Question

我是CSS / HTML的新手，我不是英语，所以我在理解类之间的关系时遇到了一些问题。我举个例子：

.classA .classB {
  color: red
}

.classC {
  color: blue
}

<div class="classA">
  <p class="classB classC">
    This text is red
  </p>
</div>

我的问题是：为什么它不应用.classC中定义的样式？

Answer 1

因为.classA .classB更具体。然后是.classC。

如果你愿意写：

.classA .classC {color:blue}

然后它将被应用。

有关详细信息，请查看MDN CSS Specificity

Answer 2

这是由于specificity。

简单来说：第一条规则比第二条规则更具体，因为它描述了一个非常具体的层次结构。

Answer 3

因为您的第一个CSS规则具有更高的特定。 （google那..​​.）

在这种特殊情况下，简单地说：＆＃34;两个班级击败一个班级＆＃34; ...

Answer 4

这是因为嵌套类的规则.classA .classB {color: red}优先于简单.classC {color:blue}。