CSS规则在同一样式表中排序

Question

CSS规则会覆盖样式表中的规则。这就是为什么在以下示例中显示的颜色为红色。

.two {
    background-color: blue;
}

.two {
    background-color: red;
}

<div class="one">
    Hello
    <div class="two"> World! </div>
</div>

为什么在下一个示例中颜色为蓝色？

.one .two {
    background-color: blue;
}

.two {
    background-color: red;
}

<div class="one">
    Hello
    <div class="two"> World! </div>
</div>

Answer 1

因为在第二个示例中，更具体的选择器优先。请查看本文的基础知识：http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

Answer 2

那是因为

.one .two {
    background-color: blue;
}

它有一个更高的优先级，因为它有2个类选择器.one和.two所以它比具有.two的第二个更具体

Answer 3

它正在发生，因为代码：

.one .two {
    background-color: blue;
}

针对class的孩子 - 一个，而

.two {
   background-color: red;
}

定位class - 只有两个是父。

由于应用于child的样式的优先级高于其父级的样式，因此它会在子元素上应用该样式。