为什么在CSS中赋予*比属性继承更具体的特性? [英] Why is * given more specificity than property inheritance in CSS?
问题描述
简单地说，我有一个页面具有以下两种样式:
Put simply, I have a page with these two styles:
* {
color: black;
}
div.error {
color: red
}
还有一个页面结构，如:
And a page structure like:
<html>
...
<div class="error">
<div class="row form">
<div class="column">
Error text.
</div>
</div>
</div>
...
</html>
您会希望错误文本"显示为红色，不是吗.但实际上，在所有浏览器中它都是黑色的.这是预期的行为吗?
You would expect "Error text" to be red, wouldn't you. But it is, in fact, rendered black in all browsers. Is this the expected behavior?
我的第二个问题取决于这是否是预期的行为.如果是这样，那么为什么设计师要在其整个网站上的每个元素上使用黑色"或其他某种颜色进行着色，如果这意味着不能在特定位置使用继承对其进行覆盖?
My second question, is contingent on whether this is the expected behavior. if it is, then why would a designer ever color every element on his whole website with "black" or some other color if that means it cannot be overridden with inheritance in specific places?
-编辑-
这个问题是在您希望在整个网站上放置默认颜色的上下文中提出的，但是无论您想要在哪里，您都可以说整个部分继承了颜色#ffeeff".例如，一种特殊形式，由类"form"的分隔符包含.您不想使用白色文本"之类的特殊类来标记表单的每个子元素，从而将所有内容都涂成白色.您只想设置"form"类的颜色并将其传播到子元素.
The question is asked in the context of where you'd want a default color to be placed across the whole website, but wherever you want, you could say "this whole section inherits color #ffeeff". For example, a special form, contained by a divider of class "form." You don't want to label every sub-element of form with a special class like "white-text" to color everything white. You just want to set the "form" class's color and have it propagate to sub-elements.
推荐答案
* 比代理样式表(浏览器随附的默认样式表)更具体，并且继承的属性仅是一些东西像这样:
* is more specific than agent stylesheets (the default stylesheets that come with the browser), and inherited properties are nothing more than something like this:
div {
/* ... */
color: inherit;
/* ... */
}
在座席样式表中，因此带有 color:黑色的 * 比带有 color:Inherit的，因此获胜. agent:div 更具体
In the agent stylesheet, so your * with color: black is more specific than agent:div with color: inherit, thus it wins.
这篇关于为什么在CSS中赋予*比属性继承更具体的特性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
