摘要：中的继承实际上是父级元素对子元素的影响。如果使用的属性为继承属性，则将其视为，否则则视为。张载名言警句人若志趣不远，心不在焉，虽学不成。张载效果如下代码在我中，大家可以随时查看。
继承作者：陈大鱼头
github： KRISACHAN
继承（英语：inheritance） 是面向对象软件技术当中的一个概念。在 CSS 中与 层叠（英语：Cascade） 一起描述了如何设置样式规则，并为所有元素的所有属性赋值。这两个属性同属规范 “ CSS Cascading and Inheritance Level ”。CSS中的 继承 实际上是父级元素对子元素的影响。
在之前的文章中，我们介绍过 层叠（优先级） 的规则，这里我们先复习一下：
| 选择器 | 千位 | 百位 | 十位 | 个位 | 合计值 |
|---|---|---|---|---|---|
| h1 | 0 | 0 | 0 | 1 | 0001 |
| #indentifier | 0 | 1 | 0 | 0 | 0100 |
| h1 + p::first-letter | 0 | 0 | 0 | 3 | 0003 |
| li > a[href*="zh-CN"] > .inline-warning | 0 | 0 | 2 | 2 | 0022 |
没有选择器, 规则在一个元素的
鸡汤大全名言警句人若志趣不远，心不在焉，虽学不成。 — 张载 名言警句（all: unset）人若志趣不远，心不在焉，虽学不成。 — 张载 名言警句（all: initial）人若志趣不远，心不在焉，虽学不成。 — 张载 名言警句（all: inherit）人若志趣不远，心不在焉，虽学不成。 — 张载 效果如下： 代码在我codepen (https://codepen.io/krischan77... 中，大家可以随时查看。 鱼头注：至于CSS中可继承的属性有点多，我就不列出来了，各位有兴趣的可以看看这个问题：https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited 。 计算值（Computed Value）计算值（Computed Value） 是解析指定属性值的结果，通过将其绝对化用以继承。 计算值（Computed Value） 用以继承时是由父节点传达到子节点的值，由于历史原因，它不一定是由 getComputedStyle() 返回的结果。 常见的计算值（Computed Value） 有：em、ex、vh、vw、smaller、bolder等不固定具体px尺寸的值。 下面是一个不同计算值单位下盒子的宽度变化的DEMO 代码有点长，就不贴出来了，有兴趣可以点开链接尝试一下：https://krissarea.gitee.io/bl...。 功能表示法（Functional Notations）功能表示法是一种组件值，可以表示更复杂的类型或调用特殊处理。主要分有以下三个部分： 数学表达式（用以四则运算）：calc()、 min()、max()和clamp()。 切换值（允许子元素循环调用传入参数）：toggle()。 属性引用（获取引用的属性）：attr()。 以上功能属性，在之前的章节中也提到过，目前能用的就只有 calc() 跟 attr()，但是即便如此，这两个函数已经却也已经发挥出了很强大的功能。 var()var() 是 CSS Custom Properties for Cascading Variables Module Level 1 的内容，中文名叫 自定义属性，并不叫CSS变量，并不叫CSS变量，并不叫CSS变量，重要的内容说三次。 语法如下： var( 方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。 我们可以在任何选择器中声明，例子如下： // 下面的定义都是有效的
:root {
--color: red;
}
@media (min-width: 300px) {
:root {
--color: blue;
}
}
.color {
--color: white;
}
a {
color: var(--color, black);
}
从上面的代码我们可以知道，自定义属性不仅仅可以在全局作用域下定义，甚至也可以在局部作用域下定义，这点是一些 CSS处理器 所无法实现的。 我们知道，CSS目前还没有条件判断的功能，但是我们藉由数学表达式函数 calc() 也可以实现很多有趣的功能。 这里我们分享一个由 var() 跟 calc() 实现的进度条功能，效果如下： 代码在我codepen: https://codepen.io/krischan77/pen/QPezjB中，各位随时可以去看效果。 currentColor关键字 currentColor 是属性 color 的值，如果 color 上设置 currentColor ，则将其视为 color: inherit。 border 和 box-shadow 默认的颜色就是当前的文字颜色，也就是类似 currentColor。 嗯，所以有什么用？ 我们可以通过 currentColor 来轻松实现换肤功能。DEMO如下： 你想换的颜色： currentColor 是 CSS3 中非常好用的一个关键字，利用它我们就可以轻松实现文本颜色与图形之间的互动。 说到这里，不知道大家有没有觉得很奇怪， 像 multi-word 这种具有连字符的单词才是 CSS 中的常规命名，而 currentColor 确是驼峰命名？如果你知道答案的话，可以在下方留言区域留言回答，不知道的话也没关系，可以持续关注鱼头的 『Hello CSS』，鱼头会在下一篇文章中解答。 后记本文主要简单分享了 CSS 的继承与可变性，同时也再次地回顾了之前系列中所分享过的层级，函数等内容，一方面是想做个整理归纳，如果 CSS 属性分配得恰当，不仅可以减轻我们很多的工作量，也可以轻松实现一些比较有趣的效果，更重要是可以减少JS 与 CSS 的耦合度，对我们的开发与后期维护也是有很大帮助的。 大家也不妨多挖掘挖掘 CSS 的潜在能力，这也许会带来意想不到的收获。 参考资料：CSS Cascading and Inheritance Level 4 CSS Values and Units Module Level 4 Origin of CSS declarations 【Hello CSS】系列【Hello CSS】是以CSS基础概念为主题的系列文章，旨在帮助大家更深刻地了解并且提高CSS在各位开发者心目中的地位。由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，这就让鱼头我喜不自胜了！ 如果你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，你可以扫描下方二维码，关注微信公众号“ 鱼头的Web海洋 ”，随时与鱼头互动。欢迎！衷心希望可以遇见你。 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/115005.html 相关文章
发表评论0条评论
wangtdgoodluck男|高级讲师TA的文章阅读更多
最新活动
阅读需要支付1元查看
|
