CSS样式表继承和优先级

小鱼儿 2023-09-24 18:10 91阅读 0赞

# CSS样式表继承 #

要想了解css样式表的继承，我们先从文档树（HTML DOM）开始。文档树由HTML元素组成。  
![在这里插入图片描述][921ec51ce7c540d4bb6041f39d3e8c60.png]  
文档树和家族树类似，也有祖先、后代、父亲、孩子和兄弟\_。  
那么CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。  
例如：(有如下结构)  
![在这里插入图片描述][0cb35c16e6314c4f96d55627f08003d9.png]  
![在这里插入图片描述][d34be93abd804ca793dabc283c8339e5.png]  
**运行结果:**  
![在这里插入图片描述][c47501be2f214d079cb355361e15c93f.png]  
在浏览器中p 和 em 字体同时变红。  
我们并没有指定em的样式，但em继承了它的父亲元素p的样式特性。  
**注意：** 当然也不是所有的css属性都会被子类继承，例如border属性。

# CSS样式表的优先级 #

CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。  
CSS 优先规则2："直接样式"比"祖先样式"优先级高。  
CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器  
CSS 优先规则4：属性后插有 !important 的属性拥有最高优先级。  
CSS 优先规则5：第二个声明始终优于第一个声明。  
**（浏览器读取 CSS 是由上到下的，这就意味着，如果发生冲突，浏览器将会应用最后声明的样式）**

## （1）Class 选择器的优先级高于继承样式 ##

![在这里插入图片描述][904e95a1ca4140ed953f4ab44cc63b06.png]

## （2）ID 选择器优先级高于 Class 选择器 ##

![在这里插入图片描述][6ee6b491d3cc4ff29361c03a58c8381f.png]

## （3）内联样式的优先级高于 ID 选择器 ##

id 选择器无论在style标签哪里声明，都会覆盖 class 声明的样式，其实还有其他方法可以覆盖重写 CSS 样式，如行内样式。\*\*  
![在这里插入图片描述][d28b46899e3246d79721d056014e5dda.png]

## （4）HTML 元素里应用的 class 的先后顺序无关紧要 ##

但是，在`<style>`标签里面声明的class顺序十分重要，第二个声明始终优于第一个声明。\*\*  
![在这里插入图片描述][2252b71d569643f9a6b71e9890684a7b.png]

## （5）Important 的优先级最高 ##

![在这里插入图片描述][aaf649969e734493a4a5531ba5420761.png]

[921ec51ce7c540d4bb6041f39d3e8c60.png]: https://img-blog.csdnimg.cn/921ec51ce7c540d4bb6041f39d3e8c60.png
[0cb35c16e6314c4f96d55627f08003d9.png]: https://img-blog.csdnimg.cn/0cb35c16e6314c4f96d55627f08003d9.png
[d34be93abd804ca793dabc283c8339e5.png]: https://img-blog.csdnimg.cn/d34be93abd804ca793dabc283c8339e5.png
[c47501be2f214d079cb355361e15c93f.png]: https://img-blog.csdnimg.cn/c47501be2f214d079cb355361e15c93f.png
[904e95a1ca4140ed953f4ab44cc63b06.png]: https://img-blog.csdnimg.cn/904e95a1ca4140ed953f4ab44cc63b06.png
[6ee6b491d3cc4ff29361c03a58c8381f.png]: https://img-blog.csdnimg.cn/6ee6b491d3cc4ff29361c03a58c8381f.png
[d28b46899e3246d79721d056014e5dda.png]: https://img-blog.csdnimg.cn/d28b46899e3246d79721d056014e5dda.png
[2252b71d569643f9a6b71e9890684a7b.png]: https://img-blog.csdnimg.cn/2252b71d569643f9a6b71e9890684a7b.png
[aaf649969e734493a4a5531ba5420761.png]: https://img-blog.csdnimg.cn/aaf649969e734493a4a5531ba5420761.png