{ color:继承} 和 { color: currentColor } 有什么区别？

Question

请参阅这个最小示例

.inherit {
  color: red;
}
.inherit p {
  color: inherit;
}

.currentColor {
  color: red;
}
.currentColor p {
  color: currentColor;
}

<div class="inherit">
  <p>inherit</p>
</div>

<div class="currentColor">
  <p>currentColor</p>
</div>

这两个结果是相同的。

当我可以直接使用时，currentColor在属性中使用有什么区别吗？colorinherit

Answer 1

inherit表示使用父级使用的值。

currentColor遵循最接近的颜色属性值，

实施例1

这个div的边框颜色和盒子阴影颜色将为红色。因为 currentColor 遵循最接近的颜色属性值。

div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

实施例2

这个div的边框颜色和盒子阴影颜色将为蓝色。因为最接近的颜色属性值是在主体及其蓝色中定义的。

body {
  color: blue;
}

body > div { 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}