CSS的currentColor属性

脑瘫前端

什么是currentColor

currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。

简单地将，如果当前元素没有在CSS中显式地指定一个color值，那么将会它的颜色将会遵从CSS规则，从父元素继承而来。

例子

  • 场景一
1
2
3
4
<p>憨憨</p>
p{
    color: green;
}

此时，<p>标签的currentColor的值为green。

  • 场景二
1
2
3
4
5
6
<div class="container">
    <p>憨憨</p>
</div>
.container{
    color: #777777;
}

此时没有给<p>标签指定颜色，因此它的color是从父元素继承而来，它的currentColor就是#777777。

为什么要用currentColor

目前的css3图标或SVG可以通过css来改变颜色，我们可以通过currentColor来让图片跟着文字颜色的改变而改变，属实一劳永逸。