css选择器和其权重

css(不考虑css3)选择器大致分为简单选择器和复杂选择器

简单选择器

id选择器:#{ key:value } 以#号开头,#后面是id名字.每个id是唯一不可重复的 

class选择器.{ key:value } 以点开头,点后面是class名字.一个标签可以使用多个class名字,一个class也可以使用在多个标签上

属性选择器 [class ] .{ key:value } 或者[class='xxx' ] .{ key:value }  前则匹配标签有无此属性,后者匹配标签的属性名和属性值

标签选择器:a[class ] .{ key:value }   顾名思义  匹配标签元素名的选择器

伪类选择器:  :active[class ] .{ key:value }   匹配一些css无法从文本识别的行为

伪元素选择器:   ::after[class ] .{ key:value }   匹配一些文本隐藏的元素

 

复杂选择器

复杂选择器或者成为组合选择器

后代选择器  选择器中间空格  不论前面的和后面的选择器隔了多少层级,都可以匹配到

父子选择器: 选择器中间加>  只匹配自己下一层级的选择器

并列选择器: 选择器中间不空格  标签元素放在第一个  只有都拥有才会被匹配到

分组选择器 :不同分组用逗号隔开  只要有一个分组就会被匹配到

 

选择器js匹配规则是从右往左看,因为元素的父级只有一个,子级却有很多

 

!important(1000)>行间样式(100)>class,伪类,属性(10)>标签,伪元素(1)>通配符#(0)256进制的