css有几种选择器，有什么区别？

基本选择器

1.标签选择器：直接用元素的标签来进行选择

span {   	// 直接选择span标签
	size:16px;
}

2.ID选择器：通过设置id名字，进行精确的选择，用#来定义

# div1 {	//通过id名字来进行选择
	color:red;
}
<div id="div1">1</div>

3.类选择器:通过类名来进行选择，选择范围比id选择器大，用’.'来定义

.div1 {	//所有类名为div1的都被选择了
	color:red;
}
<div id="div1">1</div>
<div id="div1">1</div>
<div id="div1">1</div>

4.通配符选择器：范围更大，作用于所有标签，用*来定义

不建议使用，对页面加载负担大

高级选择器

1.后代选择器：定义用空格隔开

div span {	//选择的是div标签下的span标签，当然后代顾名思义可以不止隔一代，可以隔多代进行选择
	color：red；
}
<div><span>1</span></div>

2.交集选择器：与后代选择器定义的不同是，没有空格隔开，两个元素紧挨着

span#a1 {	//选择的是两个条件1.既是span标签的 2.id名是a1的元素，两个条件缺一不可
	color：red；
}
<span id=“a1”>1</span>
<span >1</span>

3.并集选择器：定义用逗号隔开

span，#a1 {	//选择的是1.是span标签的 2.id名是a1的元素，两个条件满足一个即可
	color：red；
}
<span id=“a1”>1</span>
<span >1</span>

4.伪类选择器：

1.静态伪类：点击连接之前（link），点击连接之后(visited)这样的

2.动态伪类：鼠标移入（hover），点击之后（focus）这样的

3.子代选择器：用>来定义，比后代选择器的范围要窄

div>p { 	// 这里顾名思义只能选择下一级，也就是儿子那一级，下两级不能选择，因为下两级就不是儿子了是孙子，下两级后代选择器可以选择
	****
}
<div>
		<p>我是div的儿子</p>
</div>

4.序选择器：用:first-child或.first来定义，比子代选择器的范围还要窄，直接精确到子代的第几个