我们可以一次性为 color
属性定义一个值,并将其与 currentColor
关键字一起重用,而不是在几个地方重复使用颜色。
/* ❌ */
div {
color: #d1d5db;
background-image: linear-gradient(to bottom, #d1d5db, #fff);
}
/* ✅ */
div {
color: #d1d5db;
background-image: linear-gradient(to bottom, currentColor, #fff);
}
因为元素的 color
属性(如果未指定)是从其父元素继承的,所以我们可以在元素的子元素中使用 currentColor
关键字。
例如,假设我们希望链接的颜色与其容器(给定的 div
元素)相同:
/* 不好的做法:在三个地方声明相同的颜色 */
div {
color: #fff;
}
div a {
border-bottom: 1px solid #fff;
color: #fff;
text-decoration: none;
}
/* 好的做法 */
div {
color: #fff;
}
div a {
border-bottom: 1px solid currentColor;
color: currentColor;
text-decoration: none;
}
我们经常在 camelCase 格式中使用 currentColor
关键字。但是,CSS 不区分大小写,这意味着currentColor
、CurrentColor
甚至 Currentcolor
都是有效的关键字,并且与 currentColor
具有相同的效果