html - 为什么 * 在 CSS 中比属性继承更具体？

Question

简而言之，我有一个具有这两种样式的页面：

* { 
    color: black; 
}

div.error {
    color: red
}

页面结构如下：

<html>
...
<div class="error">
    <div class="row form">
        <div class="column">
            Error text.
        </div>
    </div>
</div>
...
</html>

你会期望“错误文本”是红色的，不是吗。但事实上，它在所有浏览器中都呈现为黑色。这是预期的行为吗？

我的第二个问题取决于这是否是预期的行为。如果是这样，那么为什么设计师会用“黑色”或其他颜色为他的整个网站上的每个元素着色，如果这意味着它不能在特定位置被继承覆盖？

- 编辑 -

这个问题是在您希望在整个网站上放置默认颜色的上下文中提出的，但是无论您想要什么，您都可以说“这整个部分继承了颜色#ffeeff”。例如，一个特殊的表格，包含在“表格”类的分隔符中。您不想用“white-text”之类的特殊类标记表单的每个子元素，以将所有内容都涂成白色。您只想设置“表单”类的颜色并将其传播到子元素。

score 4 · Accepted Answer

*比代理样式表（浏览器附带的默认样式表）更具体，继承的属性无非是这样的：

div {
  /* ... */
  color: inherit;
  /* ... */
}

在代理样式表中，因此您的*withcolor: black比agent:divwith更具体color: inherit，因此它获胜。

score 1 · Accepted Answer

这是预期的行为，对于要显示为红色的文本，您要指定：

div.column {
  /* ... */
  color:red;
  /* ... */
}

做检查：（为什么）CSS星选择器被认为是有害的？正如 4castle 所建议的那样。

score 0 · Accepted Answer

只是这样做：

<style>
* { 
    color: black; 
}

div.error {
    color: red
}
</style>
<div>
    <div class="row">
        <div class="column error">
            Error text.
        </div>
    </div>
</div>

html - 为什么 * 在 CSS 中比属性继承更具体？

3 回答 3

Related

Reference