作者：陈大羽头github：KRISACHAN继承（英文：inheritance）是面向对象软件技术中的一个概念。与CSS中的Cascade一起描述了如何设置样式规则并为所有元素的所有属性赋值。这两个属性属于规范“CSSCascadingandInheritanceLevel”。CSS中的继承其实就是父元素对子元素的影响。在上一篇文章中，我们介绍了级联（优先级）规则。这里先回顾一下：选择器的千位、百位、十位的总值h100010001#indentifier01000100h1+p::first-letter00030003li>a[href*="zh-CN"]>.inline-warning00220022没有选择器,规则在一个元素的鸡汤百科名人名言如果一个人不远见和心不在焉，就算学不会。—张载名言警句(all:unset)一个人志向不远，心不在焉，学不会成。—张载名言（全：首字母）一个人如果不是远见和心不在焉，他是学不会成功的。—张载名言（全部：继承）人志不远，心不在焉，则学无成。—张载效果如下：代码在我的codepen（https://codepen.io/krischan77...，大家可以随时查看时间。鱼头注：关于CSS中的可继承属性，我就不一一列举了。如果你有兴趣，可以查看这个问题：https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited。ComputedValueComputedValue是解析指定属性值的结果，通过使其成为绝对继承。计算值（ComputedValue）用于继承从父节点传递给子节点的值。由于历史原因，不一定是getComputedStyle()返回的结果。常见的计算值（ComputedValue）包括：em、ex、vh、vw、smaller、bolder等不固定具体px大小的值。下面是不同计算值单位下改变方框宽度的DEMO代码，有点长，就不贴了。感兴趣的可以点击链接试用：https://krissarea.gitee.io/bl...。FunctionalNotations函数符号是组件值，可以表示更复杂的类型或调用特殊处理。主要分为三个部分：数学表达式（用于四种算术运算）：calc()、min()、max()和clamp()。切换值（允许子元素循环调用传入参数）：toggle()。属性引用（获取引用的属性）：attr()。以上功能属性在前面的章节中也有提到。目前只能使用calc()和attr()，但即便如此，这两个函数已经发挥出了非常强大的功能。var()var()是CSSCustomPropertiesforCascadingVariablesModuleLevel1的内容，中文名是customproperties,notCSSvariables，不是CSS变量，不是CSS变量，重要的内容说三遍。语法如下：var(,?)方法的第一个参数是要替换的自定义属性的名称。该函数的可选第二个参数用作后备值。如果第一个参数引用的自定义属性无效，函数将使用第二个值。我们可以在任何选择器中声明它，示例如下：//以下定义有效：root{--color:red;}@media(min-width:300px){:root{--color:blue;}}.color{--color:white;}a{color:var(--color,black);}从上面的代码我们可以知道，自定义属性不仅可以在全局范围内定义，还可以在Defined在本地范围内，这对于某些CSS处理器来说是不可能的。我们知道CSS目前还没有条件判断的功能，但是我们也可以通过数学表达式函数calc()来实现很多有趣的功能。这里分享一个用var()和calc()实现的进度条功能，效果如下：
代码在我的codepen：https://codepen.io/krischan77/pen/QPezjB，随时可以看到效果。currentColor关键字currentColor是属性颜色的值。如果在color上设置了currentColor，则它被视为color:inherit。border和box-shadow的默认颜色是当前文本颜色，类似于currentColor。嗯，那有什么用？我们可以通过currentColor轻松实现换肤功能。DEMO如下：
