重温CSS--控制继承

followMyMaster
163 阅读5分钟

重温CSS--控制继承

CSS继承是一个非常有意思功能,偶尔在一些复杂的效果中用到,总是喋喋称奇!遗憾的是一直没系统的去研究,游离在完整知识体系之外,各位看官这篇文章我们一起来记录下关于CSS属性继承吧~

是的CSS的某些属性具有继承性(Inherited)

一 概念定义

继承属性

一个继承属性没有指定值时，则取父元素的同属性的计算值 computed value (en-US)。特殊情况是文档根元素(html)取该属性本身定义中的默认值初始值）

注意: 继承过来的是计算值, 而不是设置值

一个荔枝

 p { color: red; }

<p>这段信息含有 <strong>加粗文本</strong>在其中.</p>

看! strong标签并没有设置color:red;,但颜色依然是红色,这就是因为继承! image.png

非继承属性

一个非继承属性没有指定值时，则取属性的初始值。

一个荔枝

 p { border: medium solid; }

<p>这段信息含有 <strong>加粗文本</strong>在其中.</p>

再看! 父元素设置了边框,strong标签没有设置边框,所以它没有标签,因为它是非继承属性! image.png

总之:

  • 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
  • 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);

如果仅仅是这样,那么各位我们学习继承就吸收不了多少营养的.

CSS继承的强大之处在于--继承是可以控制的

二 控制继承

在控制继承之前,我们需要理解几个相关的属性和属性值,这些都是干粮,味道谈不上美,却营养丰富!

CSS的值

  1. 初始值 是属性定义的默认值，如其定义表中所列。
  2. 计算值 是这个属性在由父类转向子类的继承中的值

计算值所需要的计算通常包括将相对值转换成绝对值 (如 em 单位或百分比)。例如，如一个元素的属性值为 font-size:16px 和 padding-top:2em, 则 padding-top 的计算值为 32px (字体大小的 2 倍).

  1. 解析值 是 getComputedStyle()返回的值。对于大多数属性，它是计算值，但对于一些旧属性（包括宽度和高度），它是使用值

关键属性值

这是一组控制继承的属性值,它们可以应用于任何 CSS 属性，包括 CSS 简写 all。

  1. inherit 属性 允许显式的声明继承性，它对继承和非继承属性都生效。

inherit关键字可以使元素获取其父元素的计算值。

对于继承属性，使用inherit 关键字会提升优先级,可以提升代码灵活性。

h2 { color: green; }
#sidebar{ color: red;}
#sidebar h2 { color: inherit; }

<h2>标题</h2>
<section id="sidebar">
    <h2>标题2</h2>
</section>

快看! 标题2的颜色为红色 继承的优先级被提升: image.png

标题2 的颜色将取决于父元素的颜色,第一反应是这样使用会很灵活,关键时刻有妙用

  1. initial 属性 将初始（或默认）值应用于元素。

初始值与浏览器样式表指定的值很容易混淆，initial 可用于将所有 CSS 属性恢复到其初始状态。

上面的demo,将inherit改为initial,标题2的颜色变为黑色 image.png

  1. unset 属性 可以分为两种情况
  • 如果这个属性本来有从父级继承的值（属性默认可以继承，且父级有定义），则将该属性设置为继承的值
  • 如果没有继承父级样式，则将该属性重新设置为初始值。

换句话说，在第一种情况下（继承属性）它的行为类似于inherit，在第二种情况下（非继承属性）类似于initial。

上面的demo,将inherit改为unset,标题2的颜色变为红色 image.png

  1. revert 属性 耶可以分为两种情况
  • 如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值
  • 如果没有继承父级样式，则将该属性重新设置为浏览器代理样式表。

换句话说，在第一种情况下（继承属性）它的行为类似于`inherit，在第二种情况下（非继承属性）使用浏览器代理样式。

调试revert属性,需要把color换为font-size

   h2 { font-size: 20px; }
   #sidebar{ font-size: 28px;}
   #sidebar h2 { font-size: revert; }

  <h2>标题</h2>
 <section id="sidebar">
   <h2>标题2</h2>
 </section>

看,快看! 生效的是浏览器代理样式而非20px:

image.png

image.png

all属性

可以使用 all 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如：

h2 { font-size: 20px; color:green;}
#sidebar{
  font-size: 28px;
  color:red;
}
#sidebar h2 {  color:blue;all: inherit ; }

<h2>标题</h2>
<section id="sidebar">
<h2>标题2</h2>
</section>

看! 标题2的颜色既不是blue也不是green而是继承自#sidebar的red,同时font-size也是继承自#sidebar的28px

image.png

总结

各位,通过掌握控制继承可以给撸代码是带来意想不到的效果,也解开了css样式奇怪bug的遮羞布 haha

参考 mdn

avatar
文章
阅读
粉丝