这是我参与「第五届青训营」伴学笔记创作活动的第16天

前言

在组件库项目中，css是特别重要的一个环节，除了整体的结构，就是样式了，css的学习是花了很多时间，但是我一直没有把它当做重点，这个时候才知道什么叫做基础不牢，地动山摇了，继承的问题在这次样式调节上困扰了我很多，所以决心花时间好好弄清楚。

什么是继承

样式继承：被包在内部的标签将拥有外部标签的样式性质

问题

既然有了继承性，那么在样式表中的应用上可能会有些搞不清，多个样式表同时应用到一个对象上会发生什么情形呢？

根据选择器的优先级来进行选择，有冲突则选择选择器优先级最高的当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。

被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。所以只要子属性有声明，那么继承的属性都会失效

继承而发生样式冲突时，最近祖先获胜（最近原则）

记住权重图，有一个很好的图我不记得放在哪里了，等找到了再放这里

人为设置样式添加最高权限

！important 设置某个规则比其他的规则更重要

正确地放置!important的位置是很重要的，否则整条规则将为无效。!important总是放在规则声明的最后，在分号之前。

继承中哪些样式不会被继承？

多数边框类属性，比如Padding，Margin，背景和边框的属性都是不能继承的。

css 的继承很简单，分为默认继承的和默认不继承的，但所有属性都可以通过设置 inherit 实现继承。

默认继承的属性

默认继承的 ("Inherited: Yes") 的属性：

所有元素默认继承：visibility、cursor
文本元素默认继承：letter-spacing、word-spacing、white-space、line-height、color、font（字体所有相关的）、text-align（文本所有相关的）、direction
列表元素默认继承：list-style、list-style-type、list-style-position、list-style-image
表格元素默认继承：border-collapse（只有这个是默认继承的）

涉及到文本相关的属性，都是默认继承的。

默认不继承的("Inherited: No") 的属性：

所有元素默认不继承：all、display、overflow
行内元素默认不继承：vertical-align
盒子属性默认不继承：width、height、padding、margin、border、min-width、min-height、max-width、max-height
背景属性默认不继承：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性默认不继承：float、clear、position、top、right、bottom、left、z-index
内容属性默认不继承：content、counter-reset、counter-increment
轮廓属性默认不继承：outline-style、outline-width、outline-color、outline
页面属性默认不继承：size、page-break-before、page-break-after
声音属性默认不继承：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

通用属性值

首先需要了解，属性值分为三种，即 css 规范定义的初始值、浏览器厂商重置的用户代理样式和我们开发人员设置的样式，优先级也是按照这个顺序递增。

（关于这里的三种属性值还要好好了解）

css 为控制继承提供了四个特殊的通用属性值，每个 css 属性都能使用这些值。

inherit

设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。

initial

将属性的初始值应用于元素。实际上，就是重置为css规范定义中的默认值（不是浏览器定义的样式表中的样式）。

unset

将属性重置为自然值，也就是如果属性是自然继承的那么就是 inherit ，否则和 initial 一样。

revert

表示使用样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于 unset 。（属性值 revert 目前最新版的主流浏览器支持）

一个知识点根元素

对于 HTML 来说， :root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

在声明全局 CSS 变量时 :root 会很有用：

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

参考文章

CSS简单的继承

总结

这篇文章只是做一个小结，我觉得里面还有太多的东西需要我去探寻，也许是时候重新学习css的本质了

CSS继承问题|青训营笔记

前言