基本选择器

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来定义，比子代选择器的范围还要窄，直接精确到子代的第几个