如父子元素的字体颜色，一样平常做法是直接对两个元素进行颜色设定，但是若子元素越来越多，我们所须要的设定的代码也会增多，且当父元素颜色发生变革的时候，我们还须要批量地对子元素颜色进行重新设定。

那有没有办法，让子元素字体颜色自动跟随父元素吗？答案是肯定，css中供应的inhreit便是为此而出身！

二、案例

例如我们最常见的链接，它是默认带蓝色、下划线的元素：

htmlinheritCSS 中 inherit 的妙用 GraphQL

很多场景下，我们想让它追随父元素字体颜色，下面是详细代码实现

test1.html

&lt;!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--引入css--> <link rel="stylesheet" href="test1.css" type="text/css"></head><body><div class="parent"> <h5>parent-color</h5> <div class="child"> <h1><a href="#">https://www.baidu.com/</a></h1> </div> <div class="child child4"> <h1><a href="#">https://www.baidu.com/</a></h1> </div> <h5>parent-color</h5></div></body></html>

test1.css

.parent{ /父元素字体颜色/ color: #666;}.child{ background-color: aliceblue;}.child4 a{ /引用父元素字体颜色/ color: inherit;}

效果如上图，上面的链接是默认样式，下面的链接是利用 inherit 引用父元素字体颜色的，详细可以看大略的代码。