这些链接颜色在 CSS 继承方面的表现如何？

问题描述 投票：0回答：1

body {
  color: green;
}

.my-class-1 a {
  color: inherit;
}

.my-class-2 a {
  color: initial;
}

.my-class-3 a {
  color: unset;
}
<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
  <li class="my-class-2">Reset the <a href="#">link</a> color</li>
  <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

默认链接颜色
继承链接颜色
重置链接颜色
取消链接颜色

This is the image of the results

我正在从 MDN Web Docs 网站学习 Web 开发，当我试图理解 CSS 中的继承概念时，我陷入了困境。

网站上提供了 HTML 和 CSS 代码，并提供了其结果。结果是各种链接的颜色取决于应用于它们的类和继承。我无法理解 CSS 如何影响链接的颜色。

来自 MDN Web Docs 网站的网页

代码及其结果已经提供给我了。我只是想了解这种行为。

css inheritance
1个回答
0
投票

默认链接颜色

<a>
元素在浏览器具有的默认样式中显示为蓝色，称为用户代理样式表。大多数浏览器在其用户代理样式表中都有一个 CSS 规则，大致相当于：

a {
  color: blue;
}

继承链接颜色

让我们自上而下地工作，以更好地理解这个案例。

在 CSS 或大多数用户代理样式表中，

<ul>
没有显式应用 
color
。如果我们看一下 color 属性的 正式定义
，我们可以看到：


















继承
是的








如果我们随后参考继承文档，它会说：




如果未在元素上指定继承属性的值，则该元素将获取其父元素上该属性的计算值。




因此，对于 
<ul>
，由于它实际上没有为其 
color
 属性设置显式值，因此它继承自 
<body>
，其（计算出的）
color
 值为 
green
。 
<ul>
 元素的 
color
 属性被 计算 为 
green
。


对于 
li.my-class-1
，它再次没有为其 
color
 属性设置显式值（来自作者或用户代理样式表），因此它继承自 
<ul>
，其（计算出的）
color
 值为 
green
 。 
li.my-class-1
 元素的 
color
 属性被 计算 为 
green
。


对于 
<a>
 内的 
li.my-class-1
 元素，它的 
inherit
 属性具有 
color
 值，这意味着它继承自其父级 
<li>
，其（计算出的）
color
 值为 
green
。因此，
<a>
元素的
color
属性被计算为
green
。


重置链接颜色


我们可以从 
initial
 的 
MDN 文档中了解 
initial 的值意味着什么：




initial
 CSS 关键字将属性的初始（或默认）值应用于元素。




此外，初始（或默认）值定义为：



CSS
属性的初始值是其默认值，如规范中其定义表中所列。


如果我们查看 
color
 属性的 正式定义，我们可以看到：







canvastext










初始值








因此，
<a>
元素的
color
值为
canvastext
。这是一个
系统颜色
，定义为：


CanvasText
应用程序内容或文档中的文本颜色




对于“典型”设置，这相当于 
black
。因此 
color: initial
 等价于 
color: black
，因此为什么 
<a>
 元素是彩色的 
black
。
取消设置链接颜色


我们可以从 
unset
 的 
MDN 文档中了解 unset
 的值意味着什么：



如果属性自然继承自其父级，则 
unset
 CSS 关键字会将属性重置为其继承值；如果不是，则重置为其
初始值
。


如果我们查看 
color
 属性的 正式定义，我们可以看到：


















继承
是的







因此，
color
元素的
<a>
属性遵循与
color: inherit
相同的行为，如前面详细介绍的
继承链接颜色
部分中所指定。
    


    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.