CSS3变量currentColor浅析

最新推荐文章于 2025-03-26 18:00:31 发布

Zoey Chou

最新推荐文章于 2025-03-26 18:00:31 发布

阅读量3.8k

点赞数 1

分类专栏：前端学习笔记 CSS 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/Aimee_ice/article/details/89151338

版权

前端学习笔记同时被 2 个专栏收录

16 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

本文详细介绍了CSS3中的currentColor变量，它表示当前元素继承的文字颜色。文章通过实例展示了currentColor的基本使用，以及与inherit的区别。还揭示了一个黑科技，即在子元素中不指定border颜色时，边框颜色会自动继承文字颜色。最后提醒读者，当元素自身设置了color值，currentColor会被覆盖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义

currentColor是CSS3中的变量，它表示“当前的标签所继承的文字颜色”。

!tips：“当前颜色” 指本体color , 如果没有设置color就找父元素,一级一级找,一直到根元素位置。

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      margin: 20px auto;
      background-color: pink;
      color: blue;
    }
    .box:hover {
      background-color: green;
      color: white;
    }
    .content {
      width: 100px;
      height: 100px;
      color: currentColor;    // 正常情况下
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="content">this is a test!</p>
  </div>
</body>
</html>

出来的效果图为：

这样就不用到处写相同的颜色值，后期如果要改颜色，改一个地方即可，是不是hin简单~

currentColor与inherit

在上面代码的基础上，我无意间把content的color属性改成inherit或者我直接把它删去（默认会继承父元素或祖先元素的样式），刷新页面，得到的效果是一样的。

WHAT？那这样，currentColor岂不是就没什么用了...非也，非也。现在就来看看两者的区别：

inherit几乎可以继承除颜色外的所有样式，而currentColor是专用于颜色的继承。（虽然上文中将color改成inherit也可以，但是如果要控制border的颜色，inherit可就不行了喔，大家可以去试试~）

摘自：css-currentColor / inherit

黑科技

按照上文所说，如果我们需要控制子元素的边框颜色同父元素的文字颜色一致，就应在子元素中设置：

border:1px solid currentColor;

但神奇的是，只要给子元素设置border时，不写颜色值参数，其边框颜色会默认设置为当前盒子的文字颜色，即：

border:1px solid;

即可达到上述要求。

题外话

上述对currentColor的讨论，都是基于未给当前元素设置color颜色值的情况下，如果上述案例中的子元素自身设置了color颜色值，那么currentColor值就会被替换为该子元素当前设置的color值。

比如以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      margin: 20px auto;
      border: 1px solid red;
      color: blue;
    }
    .content {
      /*color: green;*/
      border: 1px solid currentColor;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="content">this is a test!</div>
  </div>
</body>
</html>

效果为：