CSS CSS继承并覆盖它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4822912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS inheritance and overriding it
提问by Andrew
I'm new to CSS. Ive created a Drupal site and playing with the theme.
我是 CSS 的新手。我创建了一个 Drupal 站点并使用该主题。
I have some breadcrumb stuff that I would like to theme. If I go into Firebug and turn off the CSS properties
我有一些我想主题化的面包屑内容。如果我进入 Firebug 并关闭 CSS 属性
background
border-color
border-style
in the below code
在下面的代码中
.breadcrumbs .inner {
background: none repeat scroll 0 0 #EFEFEF;
border-color: #929292 #E2E2E2 #FFFFFF;
border-style: solid;
border-width: 1px;
color: #8E8E8E;
}
I get the text looking exactly how I want it.
我得到的文本看起来正是我想要的。
If I now go into my style.css which is inheriting the code and post
如果我现在进入继承代码并发布的 style.css
.breadcrumbs .inner {
border-width: 1px;
color: #8E8E8E;
}
The formatting I don't want is retained. If I specify .breadcrumbs .innerin the style.css does that not set it up again and override what was specified higher up the cascade?
保留了我不想要的格式。如果我.breadcrumbs .inner在 style.css 中指定，那不会再次设置它并覆盖级联更高层指定的内容？
If that is not the case how do I stop the inheritance without changing the other style sheet?
如果不是这种情况，如何在不更改其他样式表的情况下停止继承？
Thanks,
谢谢，
Andrew
安德鲁
Additional Info
附加信息
Here is what I have at the moment
这是我目前所拥有的
This is what I want to have
这就是我想要的
采纳答案by nybbler
You're overriding CSS does not replace the 3 styles you want to change, so the original ones are maintained. What you likely want to do is have your style.css set something like this:
您覆盖的 CSS 不会替换您要更改的 3 种样式，因此保留了原始样式。您可能想要做的是让 style.css 设置如下：
.breadcrumbs .inner {
background: none;
border-color: transparent;
border-style: none;
}
回答by Chandu
If you specify the CSS styles for same classes twice the resulting style is a union of the attributes defined in both classes. To remove the previous styles you have to redefine the attributes.
如果您两次为相同的类指定 CSS 样式，则生成的样式是两个类中定义的属性的联合。要删除以前的样式，您必须重新定义属性。
回答by Kingsley Ijomah
If for example you have these css attached to your html document
例如，如果您将这些 css 附加到您的 html 文档
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/posts.css">
if you have the same class say .color defined in the both default.css and posts.css files, you would imagine that that last css file will be used, but it can be ignored if you write it like so:
如果你在 default.css 和 posts.css 文件中定义了同一个类，比如 .color，你会想象将使用最后一个 css 文件，但如果你这样写，它可以被忽略：
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green;
}
// In this example the colour would be blue.
Using !important on inherited style forces inherited style to be used, if you want to override the inherited style then you can simply add !important to post.css
在继承的样式上使用 !important 会强制使用继承的样式，如果您想覆盖继承的样式，则只需将 !important 添加到 post.css
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green !important;
}
// In this example the colour would be green.
Now both are viewed as important and the last one will be used.
现在两者都被视为重要的，将使用最后一个。
