选择器作用：帮助你精准的选中想要的元素\找到特定的HTML页面元素

选中的是对应id值的元素

id选择器使用#进行标识，后面紧跟id名

其基本语法格式如下：

id选择器

标签

元素的id值是唯一的，只能对应于文档中某一个具体的元素

用法基本和类选择器相同

W3C标准规定，在同一个页面内，不允许有相同的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，比如 张伟 张三 李四 李伟

id选择器 好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上

总结：

类选择器我们在修改样式中，用的最多。

id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的JavaScript搭配使用。

例：

概念：

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法：

作用：

标签选择器可以把某一类标签全部选择出来 比如所有的p标签、div标签和所有的span标签

例：

和p有关的元素都被选中

优点：

是能快速为页面中同类型的标签统一样式

缺点：

不能设计差异化样式

我们可以给标签指定多个类名，中间用空格隔开，从而达到更多的选择目的。

例：

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

语法：

类名选择器

标签

优点：

可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

注意：

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.（自定义，我们自己命名的 ）

长名称或词组可以使用中横线来为选择器命名

不要纯数字、中文等命名，尽量使用英文字母来表示

只要是class类名后面的都会被选中，想删掉时就直接去掉元素中的类名即可 class后面可以应用多个类选择器，用空格隔开即可

*，选中所有元素都为相同样式（test1）

概念

通配符选择器用*（✳）号表示，✳就是选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

其基本语法如下：

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边框。

注意：

会匹配所有的元素，降低页面响应速度，不建议随便使用

注：

不使用无具体语义定义的标签选择器div 、span

根据属性名和属性值选中元素（test2）

before

after

并且（不加任何元素直接写到一起）（test5）

后代选择器：后代元素 —— 空格（用的最多）（可以精准的选择我们想要的元素）（test6）

子元素选择器：子元素 —— > (把后代元素的空格改成">",只能选中子元素不能选子元素的子元素)（test7）

相邻兄弟元素 —— + (test8)

（后面出现的所有兄弟元素）兄弟元素 —— ~ (test9)

概念：

后代选择器又称为包含选择器

作用：

用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子

语法：

当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

作用：

子元素选择器只能选择作为某元素子元素（亲儿子）的元素（只选亲儿子）

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个“>”进行连接

语法：

这里的子指的是亲儿子 不包含孙子重孙子之类。

语法

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special

记忆技巧：

交集选择器是并且的意思，即...又...的意思

用的比较少，不太建议使用

应用：

如果某些选择器定义的相同样式，就可以利用并集选择器，可以以让代码更简洁。

并集选择器（CSS选择器分组）是各个选择器通过“，”连接而成的，通常用于集体声明。

语法：

任何形式的选择器（包括标签选择器、class类选择器和id选择器等），都可以作为并集选择器的一部分。

记忆技巧：

并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。

伪类选择器:

类选择器是一个点 比如.demo{}

而我们的伪类 用 2个点 就是 冒号 比如:link{}

作用：

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器

选中某些元素的某种状态（test3）(要写的话要按照下面的顺序)

1）a:link：超链接未访问时的状态

2）a:visited：超链接访问过的状态

3）a:hover：鼠标悬停状态

4）a:active：激活状态，鼠标按下状态