如果将链接的颜色设置为"initial"，为什么将其设置为黑色，否则将其设置为蓝色? [英] Why is the color of a link black if we set it to `initial` and blue otherwise?

问题描述

我正在经历 mdn css 教程直到我达到a标签的color属性的initial值.

I was going through mdn css tutorial until i reach the initial value for color property for the a tag.

1-如果我们没有为元素指定任何颜色，它将为蓝色.

1- if we don't specify any color for the element it will be blue.

2-但是如果我们将颜色设置为initial，它将是黑色.

2-but if we set the color to initial it will be black.

对我来说(未指定任何值并将其设置为初始值)看起来都一样(浏览器的a颜色默认样式表值) 有人可以解释一下这是怎么回事吗?

For me both(not specifying any value and setting it to initial) look like the same thing (browser's default style sheet value for a color) can some one please explain what is going on here?

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>

推荐答案

因此，事实证明，每个CSS属性都有一个

So it turns out that every css property has an initial value

例如:

background-color的初始值为Initial: transparent.

background-image初始值为Initial: none.

对于color属性，它被定义为Initial: depends on user agent

in case of color property it is defined as Initial: depends on user agent

，这取决于浏览器供应商来确定此值(对于Google chrome，该值为黑色).

which means it's up to the browser vendor to determine this value(it's black for google chrome).

因此color:initial将为链接应用黑色.

so color:initial will apply the black color for the link.

，但是如果我们没有为a指定任何颜色属性，它将默认为浏览器的

but if we didn't specify any color property for a it will default to browser's default style sheet value for a color which is blue more precisely-webkit-link.

这篇关于如果将链接的颜色设置为"initial"，为什么将其设置为黑色，否则将其设置为蓝色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！