CSS 特性

• CSS 属性的继承
• • 继承的注意点
• CSS 属性的层叠
• CSS 属性的优先级
• • 优先级细节
• 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

比较优先级的严谨方法：

• 从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
• 如果数量相同，比较下一个较小的权值，以此类推
• 如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”

总结：选择器的针对性越强，优先级越高

• !important > 内联样式 > id > class、属性、伪类 > 标签（元素）、伪元素 > 通用（*）

优先级细节

以下 2 个选择器效果一致：

#test 和 [id="test"] 看起来好像一样，其实本质不一样

• #test 优先级比 [id="test"] 高

思考：为什么会出现以下结果

第一个是因为 a 标签有默认的样式，因此无法从 div 继承；
第二个是因为 p 无法包含 div，如果是 div 包含 p 则可以

CSS 属性使用总结

为何有时候编写的 CSS 属性不好使，有可能是因为：

• 选择器的优先级太低
• 选择器没选中对应的元素
• CSS 属性的使用形式不对
• 元素不支持此 CSS 属性，比如 span 默认是不支持 width 和 height 的
• 浏览器不支持此 CSS 属性，比如旧版本的浏览器不支持 CSS3 的某些属性
• 被同类型的 CSS 属性覆盖，比如 font 覆盖 font-size

建议：充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

标签：重识,优先级,继承,元素,HTML,选择器,CSS,属性
来源： https://blog.csdn.net/weixin_43734095/article/details/117336026