为什么我们把链接设置为 "初始 "时，链接的颜色是黑色，否则就是蓝色？

Posted 2023-01-21

我通过 MDN css 教程，直到我达到 initial 的颜色属性值。a 标签。

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

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

对我来说，两者（不指定任何值和设置为初始值）看起来是一样的（浏览器默认的样式表值为 a color)有谁能解释一下这是怎么回事？

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属性都有一个 "色 "字。初始值

比如说。

background-color 初始值是 Initial: transparent.

background-image 初始值为 Initial: none.

如果 color 属性，它被定义为 Initial: depends on user agent

这意味着这个值是由浏览器厂商决定的（它是 黑色 对于google chrome）。)

所以 color:initial 将为链接应用黑色。

但是，如果我们没有给 a 它将默认为浏览器的 默认样式表值 对于 a 色即 蓝色 更准确-webkit-link.