三句话就搞懂!CSS选择器的优先级计算方法

当CSS属性的效果互相抵触时,就需要计算CSS选择器的优先级。

首先,我们给选CSS择器分类:

  • 行内样式
    ==> 标记a类
  • ID 选择器 ==> 标记b类
  • 类,属性选择器和伪类选择器 ==> 标记c类
  • 标签选择器、伪元素 ==> 标记d类

计数方法:a/b/c/d类中,出现一类,就给a/b/c/d计一个 次数。a-d从高级到低级,a类的次数高的,其样式权重高,其余bcd类无需再比较;若a类的次数相同,则比较b类,b类的次数高的,其样式高权重高,其余cd类无需再比较。以此类推到d类。(此段一共3个句号,没骗你吧

abcd类样式 的计数,举例如下:
{}为style的括号,*星号选择器 表示所有标签

*{}    //a=0 b=0 c=0 d=0 最弱权重
a:hover{}    //a=0 b=0 c=1 d=1 
ul ol{}    //a=0 b=0 c=0 d= 2
ul ol+li{}    //a=0 b=0 c=0 d=3 
h1+input[type=hidden]{}    //a=0 b=0 c=1 d=3  [type=hiden]属性选择器
ul ol li.acticce{}    //a=0 b=0 c=1 d=3 
#ct .box p    //a=0 b=1 c=1 d=1 
div#header :after{}    //a=0 b=1 c=0 d=2  :after伪元素
style=""    //a=1 b=0 c=0 d=0 

另外:
1 还有 样式覆盖
如果上述中有 权重计数相同的样式 相互抵触,谁写在下面(谁最后被写下),谁管用,之前先写的样式都被覆盖 不管用了。

2 上述分类是依据CSS选择器本身的优先级,大体上,从高到低 如下。其中 !important 会无视一切,包括上面的计算方法。

  • 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式 eg.{color: red !important;}
  • 作为style属性写在元素标签上的内联样式
  • id选择器
  • 类选择器=* 伪类选择器=* 属性选择器
  • 标签选择器=*为元素选择器
  • 通配符选择器
  • 浏览器自定义
    //直观理解这个顺序,也可以猜出来优先级了

你可能感兴趣的:(三句话就搞懂!CSS选择器的优先级计算方法)