笔记

CSS选择器（五大类）

1、元素选择器

2、类选择器

3、id选择器

4、属性选择器

5、通配符选择器

CSS权重

1、优先级：选择器相同，则执行层叠行；选择器不同，则需选择权重执行；

                     权重相同，从后往前覆盖；

                    权重不同，由高到低覆盖。

2.等级：（分为六个等级）

1、!important，加在样式属性值后                                   权重值为 10000
2、内联样式                                          权重值为1000

<div style="background-color:black">黑色背景</div>

3、id选择器                                        权重值为100

#box {background-color:blue;}

<div id="box">蓝色背景</div>

4、类，伪类和属性选择器                                                权重值为10

.box1 { background-color:red; } 

<div class="box1">红色背景</div>

5、标签选择器和伪元素选择器                                      权重值为1

div{ backgorund-color:pink; }

<div>粉色背景</div>

6、通用选择器（*）、子选择器（>）、相邻选择器（+） 权重值为0

*{ background-color:green; } 

<div>绿色背景</div>

优先级注意点：

1、权重有四组数字组成，但是不会有进位

2、可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器

3、等级从左向右判断。如果某一位数值相同，则判断下一位数值

4、简单记忆：通配符和继承权重为0；标签选择器为1；类（伪类）选择器为10；id选择器为100；内联选择器为1000；！important无穷大

5、继承的权重是0，如果该元素没有直接选中，不论父元素权重多高，子元素得到的权重都是0