被滥用的 inherit

更新日期: 2017-04-05 阅读次数: 7879 分类: CSS

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

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

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

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

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

MDN 的一个例子,就很好

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

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

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

关于作者 🌱

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