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”这样的特殊类来标记表单的每个子元素，以将所有颜色都标记为白色。您只想设置“表单”类的颜色并将其传播到子元素。

Answer 1

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

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

在代理商样式表中，* color: black与agent:div的{{1}}比color: inherit更具体，因此获胜。

Answer 2

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

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

按照4castle的建议检查：(why) is the CSS star selector considered harmful?。

Answer 3

只需这样做：

<style>
* { 
    color: black; 
}

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

为什么*在CSS中具有比属性继承更多的特异性？

3 个答案: