被滥用的 inherit

今天调样式，被 inherit 坑了一把。

这份 CSS 样式原来是这样写的

你能想到的所有标签 {
	font: inherit;
}

然后我看了半天一段文字的样式，永远是粗体，但是我从 chrome styles 里怎么也看不出来，这个样式是怎么加上去的，从 computed 里才发现，样式来自这行全局的 font: inherit。（computed 真是神器，特别是代码不规范的情况下）

我第一感觉 inherit 被滥用了。你想，整个页面里的 font 属性都要继承祖先的样式，这算哪门子的逻辑。。。

MDN 的一个例子，就很好

/* 头变绿 */
 h2 { color: green; }

 /* 随爹，头不一定变绿 */
 #sidebar h2 { color: inherit; }

特定的子元素与父级元素保持一致，这种应用场景就好理解多了。

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式