用户代理出于某种原因覆盖了 <a> 标签的 Author css 颜色声明

也许这将是一个愚蠢的问题，但为什么 css color 属性不适用于 body 或 div 选择器？我确信并且我仍然相信它应该起作用。但是没有

它在 w3schools.com 上完美运行 here 但它在我的本地服务器或 codepen.io 上都不起作用

对我来说很明显，在下面的例子中“普通作者声明”

body{color: red;} div{color: red;}

被覆盖。但为什么？

我从阅读文档开始调查，并在 14.4.2 Inheritance and cascading 部分找到了一些有意义的内容

当多个样式规则都适用时使用级联机制直接指向一个元素。 ...如果找不到规则，下一步取决于style属性是否可以继承。

所以？我的示例中的声明不起作用的原因可能是“使用级联机制...”或“样式属性可以继承”。

既然没有什么可继承的（我希望），我认为原因在于如何“使用级联机制......”

所以我参考了解释“css级联如何工作”的文档。并找到了这个https://www.w3.org/TR/css-cascade-3/

在那里我们可以了解到，与其他属性相匹配并决定我们在屏幕上看到的元素的最终视觉样式的属性值称为“计算值”。

所以要回答“为什么作者声明被覆盖”，我必须找出锚元素的“颜色”属性的“计算值”。

Chrome DevTools 中的“Computed”选项卡帮助了我。我检查了元素，发现“计算值”是

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

看到“用户代理样式表”参考非常有趣，因为文档告诉我们任何“作者声明”都会覆盖任何“用户代理声明”，除非后者是！重要。

我还就 stackoverflow here 和 here 的“为什么用户代理声明覆盖作者声明”问题进行了一些其他讨论

我看到的唯一原因是有一个 !Important user agent 声明覆盖了普通作者声明

body{color: red;} div{color: red;}

为了

<a>

html 标签。

任何人都请帮助我证明或反对存在任何!Important user agent 声明的想法，该声明覆盖了我在此示例中的普通作者声明。

body{
color: red;
}

div{
color: red;
}

<body>
  <div class="link">
      <a href="#" class="url">This text should be Red. But it is blue.</a>
    </div>
</body>

a 标记的预定义样式比从 body 标记继承的样式more specific。

您可以通过直接定位来更改 a 标记中文本的颜色。

body {
  color: green;
}

a {
  color: red;
}

<body>
  <p>Other text in the <code>body</code> is green.</p>
  <a href="#">This text is red.</a>
</body>

预定义的元素样式因浏览器而异，这就是为什么一些开发人员选择使用 normalizing 样式表的原因。它考虑了浏览器默认设置之间的差异，因此您的网站对所有用户都显示一致。

相关问答