• • 优先级细节

• CSS 属性使用总结

博文集合：【重识 HTML + CSS】知识点目录

CSS 属性的继承

============================================================================

CSS中有些属性是可继承的，何为属性的继承？

• 一个元素如果没有设置某属性的值，就会跟随父元素的值

• 当然，一个元素如果有设置某属性的值，就使用自己设置的值

比如 color、font-size 等属性都是可以继承的

究竟哪些属性可以继承，不用死记硬背，用多了自然熟练。而且可以随时查阅官方文档找到答案

不能继承的属性，一般可以使用 inherit 强制继承

浏览器的开发者工具也会标识出哪些样式是继承过来的

继承的注意点

CSS 属性继承的是计算值，并不是当初编写属性时的指定值（字面值）

CSS 属性的层叠

============================================================================

CSS 允许多个相同名字的 CSS 属性层叠同在一个元素上

• 层叠后的结果是：只有一个 CSS 属性会生效

• 浏览器的开发者工具非常清晰地显示了哪个 CSS 属性会生效

• 哪个 CSS 属性会生效，取决于 CSS 属性所处环境的优先级高低

  

CSS 属性的优先级

=============================================================================

按照经验，为了方便比较 CSS 属性的优先级，可以给 CSS 属性所处的环境定义一个权重

• !important：10000

• 内联样式：1000

• id选择器：100

• 类选择器、属性选择器、伪类：10

• 元素选择器、伪元素：1

• 通配符：0

比较优先级的严谨方法：

• 从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较

• 如果数量相同，比较下一个较小的权值，以此类推

• 如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”

最后

在面试前我整理归纳了一些面试学习资料，文中结合我的朋友同学面试美团滴滴这类大厂的资料及案例
感兴趣的朋友可以点击Java学习免费获取。

由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

大家看完有什么不懂的可以在下方留言讨论也可以关注。

觉得文章对你有帮助的话记得关注我点个赞支持一下！