CSS的七种基本选择器及其权值

一、 学习选择器的优先级，我们要知道的是： 写到选择器里面的样式都会生效，只有样式出现冲突的时候才会有优先级的概念；

二、 七种常用的基本选择器类型：

1.通配选择器

*{

}

代表文档里所有标签，一般用于初始化操作

优先级最低，权值0

2.标签选择器

div{

}

代表文档里所有相同的标签

权值1

3.类选择器

.div1{

}

标签的类名可以重名

权值10

4.id选择器

#div1{

}

id具有唯一性，文档里面只能有一个id名，不能有相同的id名，这样就决定了id选择器少用于样式布局，一般用类选择器

权值100

5.行间样式优先级高于id选择器

<div style="宽高等的设置"></div>

权值1000

6.important

列如：background-color: blue!important;

这个时候背景颜色蓝色优先

权值10000

7.群组选择器

列如：.f1,.f2{

}

通过它可以设置多个选择器的样式，优点是可以节省代码量

8.子代选择器

列如：.f1>.com{}

.f2>.com{}

#com2{}

优点在于可以更准确的找到需要设置样式的一组或者单个标签，优先级高于同级别的基本选择器

优先级相同的选择器，样式选择后定义的样式，相当于后写的样式覆盖掉先写的样式。

三、权值比较

后代选择器比较优先级的时候， 取权值最高的比较，数量多的优先级就高，如果数量一样则继续比较次高权值的数量

通配选择器 0

标签选择器 1

类选择器 10

ID选择器 100

style行间 1000

！important 10000

后代选择器 权值相加，谁大谁优先