css选择器和权重

css 选择器大致可以分为三类： id选择器 、 class选择器 、   标签选择器

● #id{属性名:属性值}

● .class{属性名:属性值}

● 标签名{属性名:属性值}

其中，他们之间又可以以不同的方式进行组合

1.后代选择器: 父代名 后代名 { 属性名:属性值; }

2.兄弟选择器: 自己 + 兄弟名 { 属性名:属性值; }

3.后代选择器: 父代名>后代名 { 属性名:属性值; }

4.群组选择器: #name1, .name2, #name div { 属性名:属性值; }

5.伪类选择器: name:伪类

6.通用(通配符)选择器: * { 属性名: 属性值; }……

不同选择器权重不一样，权重可叠加，如下：

标签选择器                权重 1

class选择器               权重 10

id选择器                    权重 100

内联选择器(style="")    权重 1000

!important                最高  

.class span   叠加权重为    10 + 1 = 11

.class .class  叠加权重为    10 + 10 = 20;

#id .class     叠加权重为     100+10 = 110;

* 权重的数值越大，权重越高，css的样式优先级就越高

* 选择器一般嵌套不超过3层，嵌套层级越高权重越高越不易复用