CSS 样式继承 inherit 属性应用

尽管绝大多数开发者都知道有 inherit 这个关键字,但还是很容易遗
忘它。 inherit 可以用在任何 CSS 属性中,而且它总是绑定到父元素的计
算值(对伪元素来说,则会取生成该伪元素的宿主元素)。

举例来说,要把表单元素的字体设定为与页面的其他部分相同,你并不需要重复指定字体属性,只需利用 inherit 的特性即可:

input, select, button { font: inherit; }

与此类似,要把超链接的颜色设定为与页面中其他文本相同,还是要用
inherit :

a { color: inherit; }

这个 inherit 关键字对于背景色同样非常有用。举个例子,在创建提
示框的时候,你可能希望它的小箭头能够自动继承背景和边框的样式

.callout { position: relative; }
.callout::before {
  content: "";
  position: absolute;
  top: -.4em; left: 1em;
  padding: .35em;
  background: inherit;
  border: inherit;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
提示框的小箭头从父元素那里获 取了背景色和边框样式
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,100评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,807评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,741评论 1 45
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,628评论 0 6