CSS没有正确覆盖属性

Question

从我读过的css样式开始，根据包含的顺序相互覆盖。但是我遇到了一些奇怪的行为，如图所示：

可以清楚地看到default.css后base.css包含default.css，我认为来自base.css的样式会覆盖base.css的样式。但事实并非如此，正如您所见，default.css的样式仍然存在，而{{1}}的样式正在被取消。那是为什么？

Answer 1

这是因为CSS类选择器（例如，示例中为.marginblock）的优先级高于CSS类型选择器（在您的示例中为body）。

如果你的CSS如下，你会得到你期望的行为：

在base.css：

.marginblock {
    margin: 0 auto;
}

在default.css：

.marginblock {
    margin: 25px;
}

以下是CSS优先顺序的更多细节：

1. ID选择器
2. 属性选择器
3. 班级选择器
4. 儿童选择器
5. 相邻的兄弟选择器
6. 后代选择器
7. 类型选择器

可以找到更多信息here。

Answer 2

default.css中的样式有一个更具体的选择器，因此将覆盖base.css样式。您可能想要了解特定点在确定如何应用css方面的工作原理。