目录
CSS选择器的作用
选择器（selector）就是根据不同的需求选择不同的标签。 这就是选择器的功能。 简单来说，就是用来选择标签的。 示例如下：
虽然上面的 CSS 做了两件事：
1. 查找所有h1标签。 选择者（选择合适的人）
2. 设置中心标签的样式，例如颜色为蓝色，字体大小为25像素。 （做正确的事）
还有人说，我们人类应该在30岁之前选择正确的人，30岁之后做正确的事。虽然选择者是同样的事情，但是当我们读完这篇博客后，我们就可以完成它。 下面三个问题！
图片
选择器类
有很多选择器。 有人说选择器这么多，学起来好难啊！ ！ ！ 不记得了！ ！ ！ 但换个角度想想，这似乎也不是什么坏事。 它为我们提供了解决问题的多种想法。 比如我回去的时候，我可以选择坐高铁回去，也可以选择坐客机或者铁路等等，虽然目的是为了回去，但是因为方便交通工具，它为我回去提供了多种选择来应对身边千变万化的事物，而选择器又可以分为基本选择器和复合选择器两大类，现在就让我一一给大家讲解一下吧~
基础选择器标签选择器
标签选择器（元素选择器）是指以HTML标签的名称作为选择器，根据标签名称进行分类，为页面中的某类标签指定统一的CSS样式。 句型如下：
实战演习
影响
标签选择器可以选择某种类型的所有标签，例如所有
标签和所有标签。
优势
可以快速为页面中的同类型标签统一设置样式。
缺点
无法设计差异化款式，只能选择当前所有款式。
类选择器
如果你想区分选择不同的标签，单独选择一个或多个标签，可以选择类选择器。 句型如下：
实战演习
对于类选择器，网上留下了这样一个公式：样式点定义结构类（class）来调用一个或多个开发最常用的！
防范措施
类选择器用“.”标记。 （中文点），后面是类名（自定义，自己命名）。 可以理解为给这个标签起一个名字来表示。 长名称或短语可以使用破折号来命名选择器。 不要使用纯数字、英文名等，尽量使用英文名。 命名要有意义，尽量让别人一眼就知道这个类名的用途。
用类选择器画三个袋子
以此案例练习两个地方：
使用类选择器。 进一步说明一下，div当然是一个包，是用来装网页内容的。class选择器——多个类名
我们可以为一个标签分配多个类名，从而实现更多的选择。 这个类名可以选择这个标签。 简单理解就是一个标签有多个名称。
从魅族官网不难看出，在正常使用过程中，对一个标签使用两个或多个类名是一种比较常见的操作方式。
如何使用多个类名
使用多类名称时应遵循的规则如下：
在class属性中写入多个类名。 多个类名必须用空格分隔。 该标签可以分别具有该类名的样式。
实战演习
使用多个类名的场景
您可以将某些标签元素的相同样式（公共部分）放在一个类上。 这种标签可以调用那些公共类css选择所有子元素，然后调用自己特有的类来保存CSS代码。 统一更换也非常方便。
然后博主改变了之前类选择器的用例，以展示使用多个类名的便利性！ ！ ！
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定样式。 HTML元素使用id属性来设置id选择器，CSS中的id选择器是用“#”定义的。
句型
实战演习
id选择器的口头禅：style#definition，结构id调用。 它只能被调用一次，并且不能被其他人使用。
类选择器和 id 选择器的区别 类选择器（class）就像一个人的名字。 一个人可以有多个名字，一个名字也可以被多个人使用。 id 选择器就像一个人的 ID 号。 ，中国唯一不可重复的。 id选择器和class选择器最大的区别在于使用次数。 前者最常用于改变样式，而后者通常用于页面上的独特元素。 它经常与 JavaScript 结合使用。 定义选择器
在CSS中，转义选择器是使用“*”定义的，这意味着所选页面中的所有元素（标签），不需要调用它，并且为所有元素手动设置样式。
句型
案例展示
转义选择器主要用于特殊情况。 我们经常用它来消除所有元素标签的内外行间距。 具体CSS代码如下：
基本选择器总结
复合选择器
在CSS中，选择器根据选择器的类型可以分为基本选择器和复合选择器。 复合选择器建立在基本选择器的基础上css选择所有子元素，并与基本选择器相结合。
后代选择器
后代选择器也称为包含选择器，可以选择父元素之上的子元素。 写法是把内标签写在上面，把外标签写在前面，中间用空格隔开。 当标签嵌套时，外部标签将成为内部标签的后代。
句型
上面的句型意思是选择元素1上面的所有元素2（后代元素）
例如：
案例展示
这里我们可以发现，使用后代选择器改变样式就像是一个一步一步的搜索过程，就像答题一样
好像有这样一个问题，你从哪里来？ 而我的回答是：我来自中国，来自中国湖南，来自四川遂宁，来自南昌进贤。 让别人一听就明白。 这里相当于给计算机下了一个明确的命令！ ！ ！
子选择器
子元素选择器（child selectors）只能被选择为某个元素的最近级别的子元素。 简单的理解就是选择兄弟元素。
句型
上述句型的意思是选择元素1上面的所有直系后代（子元素）元素2。
例如：
案例展示
联合选择器
联合选择器可以选择多组标签，同时为它们定义相同的样式。 一般用于集体声明，联合选择器由各个选择器通过英文短号（,）连接而成，任何类型的选择器都可以作为联合选择器的一部分。
句型
上述句型的意思是选择元素1和元素2
例如：
案例展示
友情提醒：约定的句型规范，我们喜欢横着写并集选择器，但是一定要注意，最后一个选择器不需要加短号！ ！ ！
伪类选择器
伪类选择器用于为各个选择器添加特效，例如为链接添加特效，或者选择第一个和第n个元素。 伪类选择器书写的最大特点是使用逗号（:），如:hover、:first-child。
由于伪类选择器有很多种，比如链接伪类和结构伪类，所以这里我先解释一下链接伪类选择器。
链接伪类选择器
案例代码
链接伪类选择器注意事项
实际工作开发中如何编写链接伪类选择器：
:focus 伪类选择器
:focus 伪类选择器用于选择聚焦的表单元素。 焦点是光标，通常可以获得类似表单的元素，所以这个选择器主要针对表单元素。
句型
案例展示
复合选择器总结
总结
本文参考B站黑马程序员pink先生为后端视频教程撰写的笔记。 到目前为止，花了两天时间写了三千多字。 供网友参考，鼓励！ ！ ！
