css不继承父级_你真的了解css权重优先级别吗

优先级与继承

入门

• css 「cascade style sheet」 - ->层叠样式表
• 一个元素的的最终样式是由「多个来源」==叠加==后的结果
• 样式来源
• 使用不同的选择器 , 设置样式
• 浏览器默认的样式
• 继承的样式 「inherited from xx」

优先级

• 优先级顺序
• !import > 内联样式 > 选择器设置的样式「element style」> 浏览器默认样式 「user agent style」> 继承样式 「inherited from xx」
• !import的优先级最高
• 尽量少用!import，除非迫不得已
• 比如: 队友写了垃圾代码
  • 如 : 内联样式，需要覆盖掉
• 比如: 有一些高优先级的代码，只能通过!import来覆盖
  • 刚开始的时候 , 没想那么多 , 直接用的选择器添加的样式
  • 后来发现 , 有需求 , 但是选择器样式的优先级又很高, 没办法才会采用

• 示例
• 浏览器的默认样式
• 如 h1 标签 , 我们没有给他任何样式 , 但是呈现出来的文本 却「变大变粗了」
• 这就是浏览器的默认样式
  • 打开开发者工具

继承

• 继承样式的权重是最低的
• 继承属性
• 常见的情形
  • 给 body 设置 color : red:
  • body下面的 p标签就是 继承color , 里面的文本就变成了 red
• color 就是继承属性
• font-size、font-family、line-height 也可以继承
• 不可继承的属性
• border、background、margin、padding、display
• 小结:
• 通常文本样式的 属性 都是可以继承的
• 其他的通常都是不可以的
• 一般可以 「css 属性 MDN 」 搜索就可以了

控制继承

• inherit
• 使用继承自父级别的样式
• 作用 : 让不可继承的属性 也去继承
• initial 「初始化值」
• 使用该属性的initial value（该默认值不是前面讲过的浏览器默认值user agent style sheet）
• 属性的 初始化的值
• 一般 可以清除 属性所有值 , 重新开始
• unset
• 如果是继承属性则继承父级
• 如果是非继承属性就用initial value
• 控制继承案例
• 为什么要有上面三个属性值?
• 我猜测 , 最大的原因就是为了 让不可以继承的属性 , 也可以被继承

优先级计算

• 设置的样式
• 不同的属性会叠加 , 相同的属性会覆盖
• 覆盖原则
• 选择器优先级
  • 高的覆盖低的
  • 相同 , 后面出现的覆盖前面的
• 选择器的优先级计算方法
• 千位：如果声明在style的属性（内联样式）则该位得一分
• 百位：选择器中包含ID选择器则该位得一分
• 十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
• 个位：选择器中包含元素、伪元素选择器则该位得一分
• 小结
  • 伪类 -->类 –->十位
  • 伪元素 –-> 元素 -->个位

• 示意图

• ==通用选择器(*)，组合符(+,>,~,'')，和否定伪类(:not)不会影响优先级==

计算题解决

两个核心:

1. 第一步 : 分析样式来源 , 「优先级顺序」
2. 第二步 : 如果样式来源是 选择器样式 , 那么就分析选择器样式 的优先级