CSS三大特性

继承性

特性:子元素有默认继承父元素样式的特点(子承父业)
层叠性

(拓展)继承失效的特殊情况

如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式

  • a标签的color会继承失效

• 其实color属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了

  • h系列标签的font-size会继承失效
    • 其实font-size属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
  • div的高度不能继承,但是宽度有类似于继承的效果
    • 宽度属性不能基继承,但是div有独占一行的特性

层叠性

  • 特性
  1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
  2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

优先级

特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式: • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important

注意点:

  1. !important 写在属性值的后面,分号的前面!
  2. !important 不能提升继承的优先级, 只要是继承优先级最低!
  3. 实际开发中不建议使用 !important 。
color: rgb(0,0,0) !important;

属性值结尾加

权重叠加计算

场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
权重叠加计算公式 :(每一级之间不存在进位)

CSS三大特性插图

比较规则:

  1. 先比较第一级数字,如果比较出来了,之后的统统不看
  2. 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
  3. …… 4. 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算 !)
  4. 注意点: !important 如果不是继承,则权重最高,天下第一!
© 版权声明
THE END
喜欢就支持一下吧
点赞7赞赏 分享
评论 抢沙发

请登录后发表评论