CSS选择器

目录

CSS选择器的作用

选择器分类

基础选择器

标签选择器

类选择器

利用类选择器画三个盒子

类选择器-多类名

id选择器

类选择器和id选择器的区别

通配符选择器

基础选择器总结

复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

复合选择器总结

总结

---

CSS选择器的作用

选择器（选择符）就是根据不同的需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。实例如下：

以上CSS其实就做了两件事： 

1.找到所有的h1标签。选择器（选对人）

2.设置中心标签的样式，比如颜色为红色，字体大小为25像素。（做对事）

别人都说我们人啊，在30岁之前要选对人，在30岁之后要做对事情，其实选择器也就是这么一回事，当我们看完这篇博客后，就可以完成，下面这三个问题啦！

图片

选择器分类

选择器有许许多多，有人说这么多选择器，好难学啊！！！记不住！！！但换一种角度思考，这其实也并不是一件坏事情，这为我们解决一种问题提供了，多种思路，就比如我回家一样，我可以选择坐火车回家，也可以选择坐飞机或者高铁等等，虽然目的都是回家，但由于交通的便利性，为我回家提供了多种选择的方式，以应对周围事物的千变万化，而选择器又可以分为基础选择器和复合选择器两个大类，现在由我来为大家一一讲解~

基础选择器

• 基础选择器是由单个选择器组成的
• 基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器

标签选择器

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

实战演练

作用

标签选择器可以把某一类标签全部选择出来，比如所有的

标签和所有的标签。

优点

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

缺点

不能设计差异化样式，只能选择全部的当前样式。

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器。语法如下：

实战演练

 对于类选择器网上则流传这样的一个口诀：样式点定义 结构类(class)调用 一个或多个 开发最常用！

注意事项

1. 类选择器使用"."(英文点号)进行标识，后面紧跟类名（自定义，我们自己命名的）。
2. 可以理解为给这个标签起了一个名字，来表示。
3. 长名称或词组可以使用中横线来为为选择器命名。
4. 不要使用纯数字，中文等命名，尽量使用英文名字来表示。
5. 命名要有意义，尽量使别人一眼就知道这个类名的目的。 

利用类选择器画三个盒子

 通过这个案例练习两个地方：

1. 类选择器的使用。
2. 进一步明确div其实就是一个盒子，用来装网页内容的。

类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多选择的目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。

从小米官网不难看出，在平时使用的过程中，对一个标签使用两个甚至以上的类名是比较常见的操作手法。

多类名的使用方式

多类名的使用要遵循的规则如下：

1. 在class属性中写多个类名
2. 多个类名中间必须用空格分开
3. 这个标签就可以分别具有这些类名的样式

实战演练

 多类名的使用场景

1. 可以把一些标签元素相同的样式(共同的部分)放在一个类里面
2. 这些标签都可以调用这些公共的类，然后再调用自己独有的类
3. 从而节省CSS代码，统一修改也非常方便

接下来博主通过对前文类选择器的使用案例经行修改，来展示多类名的使用之便捷！！！

 

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。而HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。

语法

  实战演练

 id选择器的口诀：样式#定义，结构id调用。只能调用一次，别人切勿使用。

类选择器和id选择器的区别

1. 类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
2. id选择器就好比人的身份证号码，全中国唯一的，不得重复
3. id选择器和类选择器最大的不同在于使用次数上，后者在修改样式中使用的最多，而前者一般用于页面唯一性的元素上，经常和JavaScript搭配使用

通配符选择器

在CSS中，通配符选择器使用 "*" 来定义，它表示选取页面中所有元素(标签)，它不需要调用，自动就给所有的元素使用样式。

语法

案例演示

 

 通配符选择器多在特殊情况下才使用，我们时常用其来清除所有元素标签的内外边距，具体CSS代码如下:

基础选择器总结

复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

• 复合选择器可以更准确和更高效的选择目标元素(标签)
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
• 常用的复合选择器包括：后代选择器，子选择器，并集选择器和伪类选择器等等

后代选择器

后代选择器又称包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为了外层标签的后代。

语法

上述语法表示选择元素1里面的所有元素2(后代元素) 

例如：

•  元素1和元素2中间用空格隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
• 元素1和元素2也可以是任意的基础选择器

案例演示

 

 

这里我们可以发现使用后代选择器改变样式，就像是一个逐级查找的过程，就像是在回答类

似于这样一个问题，你来自于哪里？而我的回答是：我是中国的，中国江西的，江西上饶的，上饶鄱阳的，让旁人一听就明白，在这里就相当于给计算机一个明确的指令！！！

子选择器

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法

上述语法表示选择元素1里面的所有直接后代(子元素)元素2。 

例如：

• 元素1和元素2中间用大于号隔开
• 元素1是父级，元素2是子级，最终选择元素2
• 元素2必须是亲儿子，其孙子，重孙子，之类都不归他管，所以我们也可以叫他亲儿子选择器

 案例演示

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明，并集选择器是各种选择器通过英文短号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法

上述语法表示选择元素1和元素2

例如：

•  元素1和元素2中间用短号隔开
• 短号可以理解为和的意思
• 并集选择器通常用于集体声明

案例演示

 

友情提醒：约定的语法规范，我们并集选择器喜欢竖着写，而且一定要注意，最后一个选择器不需要加短号！！！

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或者选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号（:）表示，比如:hover，:first-child。

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

链接伪类选择器

案例代码

链接伪类选择器注意事项

• 为了确保生效，请按照LVHA的顺序声明:link :visited :hover :active.
• 因为a链接在浏览器中具有默认的样式，所以我们实际的过程中都需要给链接单独指定样式

链接伪类选择器实际工作开发中的写法: 

:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说的。

语法

案例演示

 

 

复合选择器总结

 

总结

本文参照B站黑马程序员pink老师的前端视频教程而写的笔记，行文至此，耗时两日，行文3000有余， 供广大网友参考，与之共勉！！！