CSS 样式继承 inherit 属性应用

2019-04-01  本文已影响0人  xinhui9056

尽管绝大多数开发者都知道有 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);
}
提示框的小箭头从父元素那里获 取了背景色和边框样式
上一篇 下一篇

猜你喜欢

热点阅读