CSS3中currentColor关键字的妙用_svgfillcurrentcolor资源-CSDN文库

200 浏览量 2020-12-13 08:29:50 上传评论收藏 144KB PDF 举报

资源详情

资源评论

资源推荐

CSS3中中currentColor关键字的妙用关键字的妙用

初识初识

它是何物？具有怎样的功效？它从哪里来？带着这些疑问我们继续。

下面是来自MDN的解释：

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

你这可以这么理解，CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS

里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。

到此似乎解决了上面三个哲学式的提问，但依然有些模糊。程序员之间的交流，还是上码才好。

场景场景1

CSS Code复制内容到剪贴板

<p>约么？</p>

p{

color: red;

}

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

场景场景2

CSS Code复制内容到剪贴板

<div class="container">

<p>约么？</p>

</div>

.container{

color: #00ff00;

}

现在，我们没有给<p>标签指定颜色，它的color从父级容器也就是class为container的div继承而来，换句话说此时p标签的color为

#00ff00，currentColor又是直接去取元素的color值，所以此时p标签的currentColor值也为#00ff00。

场景场景3

如果父级元素也没有写color呢？其实这里都还是CSS规则的范畴，跟本文的主角关系不太大。但本着不啰嗦会死的原则，就展开了讲。

如果父级元素也没有指定颜色，那它的父级元素就会从父级的父级去继承，直到文档的根结点html标签都还没显示指定一个颜色呢，就应用上浏览器默

认的颜色呗~

XML/HTML Code复制内容到剪贴板

<!doctype html>

<html>

<head>

<title>我来组成头部</title>

</head>

<body>

<p>约么？</p>

</body>

<footer>战神金钢，宇宙的保护神！</footer>

</html>

/**

* 无CSS

*/

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

内容反馈

weixin_38621565

粉丝: 4
资源: 960

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip