body {
color: green;
}
.my-class-1 a {
color: inherit;
}
.my-class-2 a {
color: initial;
}
.my-class-3 a {
color: unset;
}个字符
默认链接颜色
继承链接颜色
重置链接颜色
取消设置链接颜色
的数据
我正在从MDN Web Developer网站学习Web开发，当我试图理解CSS中继承的概念时，我被卡住了。
网站上提供了HTML和CSS代码，并提供了其结果。结果是各种链接的颜色取决于应用于它们的类和继承。我无法理解CSS如何影响链接的颜色。
来自MDN Web服务器网站的网页
代码和它的结果已经提供给我了。我只是想了解这种行为。
1条答案
按热度按时间djmepvbi1#
默认链接颜色
<a>元素是浏览器默认样式的蓝色，称为 User Agent Stylesheets。大多数浏览器在其用户代理样式表中有一个CSS规则，大致相当于：字符串
继承链接颜色
让我们自上而下地更好地理解这个案例。
在CSS或大多数用户代理样式表中，
<ul>没有显式应用color。如果我们查看color属性的 Formal definition，我们可以看到：| | |
| --|--|
| Inherited|是的|
如果我们参考继承文档，它说：
当没有为元素指定继承属性的值时，元素将获取其父元素上该属性的computed value。
因此，对于
<ul>，由于它实际上没有为其color属性设置显式值，因此它继承自<body>，其（计算）color值为green。<ul>元素的color属性为green。对于
li.my-class-1，它也没有为它的color属性（来自作者或用户代理样式表）设置显式值，因此它继承自<ul>，其（计算）color值为green。li.my-class-1元素的color属性为green。对于
li.my-class-1内部的<a>元素，它的color属性的值为inherit，这意味着它继承自父元素<li>，其（计算）color值为green。因此，<a>元素的color属性计算为green。重置链接颜色
我们可以从MDN documentation on
initial中看看initial的值意味着什么：initialCSS关键字将属性的initial (or default) value应用于元素。此外，initial (or default) value is defined为：
CSS属性的初始值是其默认值，如规范中定义表中所列。
如果我们查看
color属性的 Formal definition，我们可以看到：| | |
| --|--|
| Initial value|
canvastext|因此，
<a>元素的color值是canvastext。这是一个System Color，定义为：CanvasText个应用程序内容或文档中的文本颜色
对于“典型的”设置，这将相当于
black。因此color: initial相当于color: black，因此<a>元素的颜色为black。取消链接颜色设置
我们可以从MDN documentation on
unset中看看unset的值意味着什么：unsetCSS关键字将属性重置为它的继承值，如果属性自然继承自其父属性，则重置为它的initial value。如果我们查看
color属性的 Formal definition，我们可以看到：| | |
| --|--|
| Inherited|是的|
因此，
<a>元素的color属性遵循与color: inherit相同的行为，如前面详细介绍的 * 继承链接颜色 * 部分所指定的。