基础选择器
一、CSS选择器的作用
根据不同需求把不同的标签选出来，即选择标签用的（又称旋选择符）；
二、分类
<一>、基础选择器
1、解释
一个标签可以定义多个类名；
2、标签选择器
1> 又名元素选择器
2> 定义
指用HTML标签名作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式；
3> 例如:
4> 作用
可以把某一类标签全部选择出来;
5> 优点
能快速为页面中同类型的标签统一设置样式;
6> 缺点
不能设计差异化样式，只能选择全部的当前标签;
3、类选择器（重点）
1> 特点
可以差异化选择不同的标签，单独选择一个或者几个标签;
2> 语法
(1)、用法
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."符号显示;
(2)、例如：
/* .类名 { 属性1：属性值1；...... } */
/* eg：.red { color: red; } */
(3)、结构需要用class属性来调用class类的意思
<div class="red">变红色</div>
(4)、口诀
样式点定义、结构类(class)调用、一个或多个、开发最常用;
3> 注意
(1)、类选择器使用"."（英文点号）进行标识，后面紧跟类名（自定义，自己命名）；
(2)、不能用HTML中的标签名作为类名；
(3)、可以理解为给这个标题起了一个名字，来表示；
(4)、长名称或者词组可以使用中横线来为选择器命名；
(5)、不要使用纯数字、中文等命名，尽量使用英文字母来表示；
(6)、命名要有意义，尽量使别人一眼就知道这个类名的目的；
(7)、命名规范：见附件（Web前端开发规范手册.doc）；
(8)、多类名：
<1>、使用方式
1, eg：
<div class="red font35">雅思</div>
2,在标签class属性中书写多个类名，多个类名中间必须用空格分开;
3,这个标签就可以分别具有这些类名的相关样式;
<2>、使用场景
1,可以把一些标签元素相同的样式（共同部分）放到一个类里面;
2,这些标签都可以调用这个公共的类，然后再调用自己独有的类;
3,从而节省CSS代码，统一修改也非常方便;
4,后期布局越复杂时使用的越多;
4、id选择器
1> 特点
(1)、id选择器可以为标有特定id的HTML元素指定特定的样式；
(2)、专属唯一的调用——id选择器只能在每个HTML文档中使用一次；
2> 语法
(1)、HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义；
(2)、eg：
3> 口诀
样式#定义，结构id调用，只能调用一次，别人切勿使用；
4> id选择器与类选择器的区别
(1)、id选择器与类选择器最大的不同在于使用次数上；
(2)、类选择器（class）好比人的名字，一个人可以拥有多个名字，同一个名字也可以被多个人使用；
(3)、id选择器好比人的身份证号码，全中国惟一的，不得重复；
(4)、类选择器在修改样式中使用的最多，id选择器一般用于页面具有唯一性的元素上，经常和JS搭配使用；
5、通配符选择器
1> 定义
在CSS中，通配符选择器使用"*"定义，表示选取页面中所以元素（标签）(包括html标签等)；
2> 语法
(1)、eg
(2)、通配符选择器不需要调用，自动就给所有的元素规定使用样式；
(3)、特殊情况才使用，后面讲解使用场景（以下是清除所有元素标签的内外边距，后期讲）；
6、基础选择器总结
详见：2.png
<二>、复合选择器
1、什么是复合选择器
1> 定义
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的；
2> 特点
(1)、复合选择器可以更准确、更高效的选择目标元素（标签）;
(2)、复合选择器是由两个或多个基础选择器，通过不同方式组合而成的;
(3)、常用的复合选择器包括：后代选择器、子代选择器、并集选择器、伪类选择器等等;
2、后代选择器（重要）
1> 定义
后代选择器又称包含选择器，可以选择父元素里面的子元素;
2> 写法
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代;
3> 语法
元素1 元素2 { 样式声明 }
/* 上述语法表示选择元素1里面的所有元素2（后代元素） */
4> 例如
5> 注意
(1)、元素1和元素2中间用空格隔开;
(2)、元素1是父级，元素2是子级，最终选择的是元素2;
(3)、元素2可以是儿子，也可以是孙子等，只要是元素1的子代即可;
(4)、元素1和元素2可以是任意基础选择器;
6> 综合举例
3、子选择器（重要）
1> 定义
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素;
2> 语法
元素1>元素2 { 样式声明 }
/* 上述语法表示选择元素1里面的所有直接后代（子元素）元素2 */
3> 例如
4> 注意
(1)、元素1和元素2中间用大于号隔开;
(2)、元素1是父级，元素2是子级，最终选择的是元素2;
(3)、元素2必须是亲儿子，其孙子、重孙子之类都不归他管，你也可以叫他亲儿子选择器;
5> 综合案例：
4、并集选择器
1> 定义
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明;
2> 语法
(1)、并集选择器是各选择器通过英文逗号（,）连接而成的，任何形式的选择器都可以作为并集选择器的一部分;
(2)、eg：
元素1, 元素2 { 样式声明 }
/* 上述语法表示选择元素1和元素2 */
3> 例如
4> 注意
(1)、元素1和元素2中间用逗号隔开;
(2)、逗号可以理解为和的意思;
(3)、并集选择器通常用于集体声明;
(4)、约定的语法规范，并集选择器喜欢竖着写;
(5)、一定要注意最后一个选择器不需要加逗号;
5、伪类选择器
1> 作用
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个、第n个元素;
2> 书写特点
伪类选择器书写最大的特点是用冒号（:）表示，比如：hover、：first-child。
3> 分类
<1>、链接伪类选择器（常用）
(1)、分类
1,eg:
2,注意
针对于同样的链接，但分不同场景地进行选择；
3,总结
(2)、 注意事项
1,为了确保生效，请按照LVHA的顺序声明——:link->:visited->:hover->:active;
2,记忆法：love hate 或者 lv包包 hao;
3,因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式;
(3)、链接伪类选择器实际工作开发中的写法：
/* 实际开发中的写法： */
/* a是标签选择器 选中所有的链接 */
a {
color: #333333;
}
/* :hover 是链接伪类选择器 选中鼠标经过时的链接 */
a:hover {
color: skyblue;
}
<二>、:focus 伪类选择器
(1)、作用
1.( :focus ) 伪类选择器用于选取获得焦点的表单元素;
-
焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对表单元素来说;
(2)、例如
/* 把获得光标的input表单元素选择出来 */ input:focus { background-color: skyblue; color: tomato; }
<三>、结构伪类选择器等
4> 总结
详见图片7.png