CSS类覆盖属性行为
[英]CSS class override property behaviour
问题描述
I tried to find answer to this but nothing straight forward, not on the StackOverflow or any of the tutorials. 
我试图找到答案，但没有直接的，不是在StackOverflow或任何教程。
So lets say I have external CSS file and class is defined there: 所以假设我有外部CSS文件，并在那里定义了类：
.someclass
{
color: blue;
margin: 10px
text-align: center;
font-size: 20px;
}
And I have pages where I want to override one or more properties of this class but keep everything else the same. 我有一些页面，我想覆盖这个类的一个或多个属性，但保持其他一切相同。
Pages include this external CSS file. 页面包含此外部CSS文件。
After that inside <head> tag I put this definition that overrides one property: 在<head>标签内部之后，我把这个定义覆盖了一个属性：
<style>
.someclass
{
color: green;
}
</style>
When everything is parsed what will be the final content of the .someclass ? 解析所有内容后， .someclass的最终内容是.someclass ？
This: 这个：
.someclass
{
color: green;
}
or this: 或这个：
.someclass
{
color: green;
margin: 10px
text-align: center;
font-size: 20px;
}
3 个解决方案
解决方案1
3 已采纳 2015-09-03 17:54:18
It's the latter. 这是后者。 Cascade resolution is on a per-property basis. 级联分辨率基于每个属性。 If the color property exists somewhere with higher precedence (in this case, the internal stylesheet), then that property is cascaded to the more precedent one. 如果color属性存在于具有更高优先级的地方（在本例中为内部样式表），则该属性将级联到更先例的属性。 The rest of the properties carry over because no more precedent declarations exist. 其余的属性继续存在，因为不再存在先例声明。
Interestingly, the CSS2.1 spec seems to conflate "style rules" and style declarations, in section 6.4. 有趣的是， CSS2.1规范似乎在第6.4节中混淆了“样式规则”和样式声明。 This may be a source of confusion. 这可能是混乱的根源。 The subsection 6.4.1 clarifies this by referring only to property declarations. 6.4.1小节仅通过引用财产声明来澄清这一点。
解决方案2
0 2015-09-03 17:55:57
When you have two style rules with identical selectors, the rule appearing later in the document wins. 当您有两个具有相同选择器的样式规则时，文档稍后出现的规则将获胜。 So, if your <link> tag is before your <style> tag, the property from the rule in the <style> tag will be applied. 因此，如果<link>标记位于<style>标记之前，则将应用<style>标记中的规则的属性。
Demo: 演示：
p { font-weight: bold; color: green; } p { font-family: sans-serif; color: blue; }
<p>I am blue, not green. I am also both bold and sans-serif!</p>
In fact, the selectors needn't be identical for this to apply. 事实上，选择器不一定要相同。 If they have the same specificity , the rule defined later wins. 如果它们具有相同的特异性 ，则稍后定义的规则将获胜。 For example, if an element has two classes defined: 例如，如果元素定义了两个类：
.a { width: 100px; padding: 8px; color: white; background-color: red; } .b { height: 75px; font-family: sans-serif; background-color: green; }
<div class="ab">I am green!</div>
Or, for an element with multiple ancestor elements and rules that use the descendant combinator ( 或者，对于具有多个祖先元素的元素和使用后代组合子的规则（ ) : ） ：
html span { font-style: italic; color: orange; } body span { text-decoration: underline; font-family: sans-serif; color: navy; }
<span>I'm navy!</span>
Or, for elements that have multiple pseudo-classes applied. 或者，对于应用了多个伪类的元素。 I can see this one tripping someone up: 我可以看到这个绊倒了一个人：
a:hover { text-decoration: overline; color: orange; } a:link, a:visited { font-family: sans-serif; color: green; }
<a href="#orange">I'm a link that doesn't change color when hovered</a>
解决方案3
0 2015-09-03 18:08:07
This is not necesary true Gilly3... it will depended on the rule specificity and it will also depend whether you are using the important flag or not... you definitely will inherit from the predecessor but you won't necessary overwrite it... 这不是必要的真正的Gilly3 ......它将取决于规则的特殊性，它还取决于你是否使用了重要的旗帜......你肯定会继承前任，但你不必覆盖它。 。
here an example see the results: http://jsfiddle.net/leojavier/xg4fffms/1/ 这里有一个例子，看看结果： http ： //jsfiddle.net/leojavier/xg4fffms/1/
<p class="text">Testing</p>
<p class="textb">Testing</p>
<p class="forceYellow textb">Testing</p>
CSS CSS
body{
background:#CCC;
}
body p.text {
color:red;
}
.textb {
color:purple;
}
p{
color: blue;
}
.forceYellow {
color:yellow !important;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.