当前位置:首页 > IT技术 > Web编程 > 正文

!Css的优先级
2022-05-31 17:23:16

每天一记:

首先:        !import的样式优先级高于一切

 

Body中 优先级:1.最近的祖先样式比其他祖先样式优先级高。2.内联样式"比"祖先样式"优先级高


选择器的优先级上面讨论了一个标签从祖先继承来的属性,现在讨论标签自有的属性。在讨论 CSS 优先级之前,先说说 CSS 7 种基础的选择器:

  • ID 选择器, 如 #id{}
  • 类选择器, 如 .class{}
  • 属性选择器, 如 a[href="segmentfault.com"]{}
  • 伪类选择器, 如 :hover{}
  • 伪元素选择器, 如 ::before{}
  • 标签选择器, 如 span{}
  • 通配选择器, 如 *{}

优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器


计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。


属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则 3、4 判断优先级。


 

作者:​​咸瑜​​​

本文摘自 :https://blog.51cto.com/u

开通会员,享受整站包年服务立即开通 >