css中的选择器类型

hello,html + css 更配哦(⊙o⊙)

+
在介绍选择器之前，首先介绍一下css的引入方式

css引入方式

• 行间样式引入：

  • 优点：可以直接给当前标签设置样式
  • 缺点：代码不能复用，会出现很大冗余

• 头部引入

  • 优点：实现了HTML和CSS的分离，减少代码冗余，请求数比较少
  • 缺点：没有完全解决代码冗余

• 外部引入

  • 优点：实现了HTML和CSS的分离，减少代码冗余，不同HTML可以共用一个CSS样式
  • 缺点：未完全解决代码冗余

六种选择器

(1)标签选择器：可以给所有以这个标签名命名的标签添加样式，一般用于重置默认属性。

====>> 标签名 + {}

(2)ID选择器 ：给标签设置一个ID熟悉并给他赋值，ID名不要重复一个ID只能被一个标签使用，一个标签也只能使用一个ID

====>> #+ID名+{}

(3)类选择器 ：一个类名更可以被多个标签使用，一个标签也可以使用多个类（可以大量减少代码冗余）

====>> .class+{}

(4)后代选择器：后代选择器是一个结构，所有满足这个顺序结构的标签都会显示这个样式,后代选择器可以隔层

====>>

div div{
	width:100px;
}
div h1{
	background:blue;
}

(5)群组选择器 :相当于同时给多个选择器设置样式，写法：多个选择器之间用英文逗号隔开

#text,#test{
    width:200px;
}

(6)通配选择器：范围最广

margin:0;
padding:0;
background:green;

注意

多个选择器之间的样式重复后，会议优先级高的样式来显示，优先级是根据选择器的权值决定的

权值越高，优先级越高

通配选择器      0
1.标签选择器    1
2.类选择器      10
3.ID选择器     100
4.style选择器  1000
5.!important  10000
后代选择器：权值相加(不同级的选择器不能相加比较)
权值相等 ，后面覆盖前面