CSS不能正确覆盖属性 [英] CSS not overwriting properties correctly

问题描述

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

From what I've read css styles overwrite each other depending on the order of inclusion. But I'm experiencing some strange behavior, shown in the picture:

清楚地看到 default.css c $ c> base.css 这将假设 default.css 的样式将覆盖 base.css 。但是不是这样的，如你所见， base.css 的样式存在，样式从 default.css 正在取消。为什么呢？

It is clearly visible that default.css is included after base.css which would suppose that styles from default.css will overwrite styles from base.css. However this is not the case, as you see, the style from base.css persists and the style from default.css is being cancelled out. Why is that?

推荐答案

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

This is because CSS class selectors (e.g., .marginblock in your example) has a higher precedence than CSS type selectors (body in your example).

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

If your CSS were as follows, you would have the behavior you expect:

在 base.css ：

In base.css:

.marginblock {
    margin: 0 auto;
}

在 default.css ：

.marginblock {
    margin: 25px;
}

这里有关于CSS优先顺序的更多细节：

Here's more detail on the CSS order of precedence:

1. ID选择器


2. 属性选择器


3. 类别选择器


4. 子选择器


5. 相邻的同级选择器


6. 后代选择器


7. >
   

1. ID selectors
2. Attribute selectors
3. Class selectors
4. Child selectors
5. Adjacent sibling selectors
6. Descendant selectors
7. Type selectors

可以找到更多信息此处。

这篇关于CSS不能正确覆盖属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！