CSS总结—— CSS选择器优先级

Posted 2020-06-26 Krystal_M

css选择器优先级

 

优先顺序:

     1、！important （IE6不支持此属性）  

     2、html中元素标签添加的style=“”（css难以管理，不推荐）

     3、一个或多个id选择器

         例：#top{margin:0;}

     4、一个或多个类选择器（包括属性、伪类选择器）

         例：.outer{}   [data-job="frontend"]{}    a:active{}

     5、标签选择器

         例：div{margin:3px;}

     6、通配选择器

         例：*{margin：10px;}

 

★ 选择器规则：

  选择器权值相加，大的优先

  若权值相同，后定义的优先

  同一级别的个数多的优先级高，数量相同比较下一级别的个数

 

权值：

     style=“”——1000

     id选择器  ——100

     类选择器/属性选择器/伪类选择器 ——10

     标签/伪对象 ——1

     通配选择器  ——0

例：找出下面优先级相同的选择器

　　A. img.thumb:after　　B.[data-job="frontend"]::first-letter

 

　　C. #main::before　　   D. [type="checkbox"]:checked　　E. ul#shop-list

答案：

 

A. img.thumb:after，总纬度是0,0,1,2（即：1+10+1=12；）

B.[data-job="frontend"]::first-letter，总纬度是0,0,1,1（即：10+1=11；）

C. #main::before，总纬度是0,1,0,1（即：100+1=101；）

D. [type="checkbox"]:checked，总纬度是0,0,2,0（即：10+10=20；）

E. ul#shop-list，总纬度是0,1,0,1（即：1+100=101；）

由于该题目假定样式来源一致，因此样式优先级相同的就是C和E了。