CSS中所有选择器详解

港控/mmm° 2023-10-14 13:19 26阅读 0赞

#### 文章目录 ####

*  一、教学视频
 *  二、基础选择器
 *   *  1.标签选择器
     *  2.类选择器
     *  3.id选择器
     *  4.通配符选择器
 *  三、复合选择器
 *   *  1.交集选择器
     *  2.并集选择器
 *  四、属性选择器
 *   *  1.\[属性\]
     *  2.\[属性=属性值\]
     *  3.\[属性^=属性值\]
     *  4.\[属性$=属性值\]
     *  5.\[属性\*=属性值\]
 *  五、关系选择器
 *   *  1.父亲>儿子
     *  2.祖先 后代
     *  3.兄+弟
     *  4.兄~弟
 *  六、伪类选择器
 *  七、伪元素选择器

## 一、教学视频 ##

教学讲解视频：[视频地址][Link 1]

## 二、基础选择器 ##

### 1.标签选择器 ###

语法结构：`标签名{css属性名：属性值;}`  
作用：通过标签名，找到页面中所有的这类标签，并设置样式。  
**注意**

*  标签选择器选择的是`一类`标签，而不是单独的一个。
 *  标签选择器`无论嵌套关系有多深`，都能够找到对应的标签。

![在这里插入图片描述][3fce79d6be5c4f3b86efd022b7559dd7.png]

### 2.类选择器 ###

语法结构：`.类名{css属性名：属性值;}`  
作用：通过类名，找到页面中所有的带有这个类名的标签，并设置样式。  
**注意**

*  所有的标签上`都有`class属性，class属性的属性值成为类名。
 *  类名可以由`数字，字母，下划线，中划线`组成，但是`不能以数字开头`。
 *  一个标签中可以同时有`多个`类名，类名之间用`空格`隔开。
 *  类名可以`重复`，一个类选择器可以同时选中`多个`标签。

![在这里插入图片描述][21a9b9d606e443bd98eecb5ed97cd278.png]

### 3.id选择器 ###

语法结构：`#id属性值{css属性名：属性值;}`  
作用：通过id属性值，找到页面中带有这个id属性值的标签，并设置样式。  
**注意**

*  所有的标签上都有id属性。
 *  id属性值类似于身份证号码，在一个页面中是`唯一`的，不可重复的。
 *  `一个`标签上只能有`一个`id属性值。
 *  `一个`id选择器只能选中`一个`标签。

![在这里插入图片描述][fb7890aff84d42f6aea1d20b3d3a76e1.png]

### 4.通配符选择器 ###

语法结构：`*{css属性名：属性值;}`  
作用：找到页面中所有的标签，然后设置样式。  
**注意**

*  开发中应用`极少`，只有在`特殊的情况`下才会使用。
 *  在页面中可能会用于去除页面中默认的margin和padding。

![在这里插入图片描述][6e28178f17e94ed080fe24b347691ae1.png]

## 三、复合选择器 ##

### 1.交集选择器 ###

语法结构：`选择器1选择器2{css样式}`  
作用：选中页面中同时满足多个选择器的标签。  
**注意**

*  多个选择器之间没有任何东西隔开，`紧挨`着的。
 *  交集选择器中如果有标签选择器，`标签选择器必须放在前面`。

![在这里插入图片描述][1e63446864374da5bda0d8fdc5924995.png]

### 2.并集选择器 ###

语法结构：`选择器1,选择器2{css样式}`  
作用：同时选择多组标签，设置相同的样式。  
**注意**

*  选择器与选择器之间用`,`隔开。

![在这里插入图片描述][9cdb011bad7f49f5bf9a4f8b74a8b053.png]

## 四、属性选择器 ##

### 1.\[属性\] ###

作用：选中含有指定属性的元素。

![在这里插入图片描述][ca48d7db64714a92bcce2f0a7ebcb15b.png]

### 2.\[属性=属性值\] ###

作用：选中含有指定属性和`指定`属性值的元素。  
**注意**

*  属性值只能由`数字，字母，下划线，中划线`组成，并且不能以`数字`开头。

![在这里插入图片描述][2ef15d128eba45a1914eb92d7286a1a7.png]

### 3.\[属性^=属性值\] ###

作用：选中含有指定属性和指定属性值`开头`的元素。  
**注意**

*  属性值只能由`数字，字母，下划线，中划线`组成，并且不能以`数字`开头。

![在这里插入图片描述][c2703b0239ef49cc874c4beecfdc22a4.png]

### 4.\[属性$=属性值\] ###

作用：选中含有指定属性和指定属性值`结尾`的元素。  
**注意**

*  属性值只能由`数字，字母，下划线，中划线`组成，并且不能以`数字`开头。

![在这里插入图片描述][09e286f22f264493ac6d740bd521f2a1.png]

### 5.\[属性\*=属性值\] ###

作用：选中指定属性和`含有`指定属性值的元素。  
**注意**

*  属性值只能由`数字，字母，下划线，中划线`组成，并且不能以`数字`开头。

![在这里插入图片描述][3b12a2e9d3e24399b65c9f49459a8830.png]

## 五、关系选择器 ##

### 1.父亲>儿子 ###

作用：选择某元素后面的`第一代`子元素。

![在这里插入图片描述][071b3f984d4f408d8bf3aa13a9a5f32f.png]

### 2.祖先 后代 ###

作用：选择某元素后面的`所有`子元素。

![在这里插入图片描述][ffcdf29ba2df42998853c15eeb73d531.png]

### 3.兄+弟 ###

作用：可选择`紧接`在另一元素后的元素，且二者有`相同`父元素。

![在这里插入图片描述][cc070e9eaafa4d39aead6af50a76e162.png]

### 4.兄~弟 ###

作用：选取某个元素之后的`所有相同`元素。  
**注意**

*  比如`.class-one ~ h2` 这句就是选取 .class-one后面`所有`的 h2。
 *  这个选择器两种元素必须处于`同一个`父元素内，被选取的元素不必直接`紧随`。

![在这里插入图片描述][6f7f8724f3b44a2090588b3d5750866f.png]

## 六、伪类选择器 ##

请浏览博客：[CSS中伪类详解和用法例子详解][CSS]

## 七、伪元素选择器 ##

请浏览博客：[CSS中伪元素详解和用法例子详解][CSS 1]

[Link 1]: https://www.bilibili.com/video/BV1a94y1C7g5
[3fce79d6be5c4f3b86efd022b7559dd7.png]: https://img-blog.csdnimg.cn/3fce79d6be5c4f3b86efd022b7559dd7.png
[21a9b9d606e443bd98eecb5ed97cd278.png]: https://img-blog.csdnimg.cn/21a9b9d606e443bd98eecb5ed97cd278.png
[fb7890aff84d42f6aea1d20b3d3a76e1.png]: https://img-blog.csdnimg.cn/fb7890aff84d42f6aea1d20b3d3a76e1.png
[6e28178f17e94ed080fe24b347691ae1.png]: https://img-blog.csdnimg.cn/6e28178f17e94ed080fe24b347691ae1.png
[1e63446864374da5bda0d8fdc5924995.png]: https://img-blog.csdnimg.cn/1e63446864374da5bda0d8fdc5924995.png
[9cdb011bad7f49f5bf9a4f8b74a8b053.png]: https://img-blog.csdnimg.cn/9cdb011bad7f49f5bf9a4f8b74a8b053.png
[ca48d7db64714a92bcce2f0a7ebcb15b.png]: https://img-blog.csdnimg.cn/ca48d7db64714a92bcce2f0a7ebcb15b.png
[2ef15d128eba45a1914eb92d7286a1a7.png]: https://img-blog.csdnimg.cn/2ef15d128eba45a1914eb92d7286a1a7.png
[c2703b0239ef49cc874c4beecfdc22a4.png]: https://img-blog.csdnimg.cn/c2703b0239ef49cc874c4beecfdc22a4.png
[09e286f22f264493ac6d740bd521f2a1.png]: https://img-blog.csdnimg.cn/09e286f22f264493ac6d740bd521f2a1.png
[3b12a2e9d3e24399b65c9f49459a8830.png]: https://img-blog.csdnimg.cn/3b12a2e9d3e24399b65c9f49459a8830.png
[071b3f984d4f408d8bf3aa13a9a5f32f.png]: https://img-blog.csdnimg.cn/071b3f984d4f408d8bf3aa13a9a5f32f.png
[ffcdf29ba2df42998853c15eeb73d531.png]: https://img-blog.csdnimg.cn/ffcdf29ba2df42998853c15eeb73d531.png
[cc070e9eaafa4d39aead6af50a76e162.png]: https://img-blog.csdnimg.cn/cc070e9eaafa4d39aead6af50a76e162.png
[6f7f8724f3b44a2090588b3d5750866f.png]: https://img-blog.csdnimg.cn/6f7f8724f3b44a2090588b3d5750866f.png
[CSS]: https://blog.csdn.net/dgfdhgghd/article/details/131455684
[CSS 1]: https://blog.csdn.net/dgfdhgghd/article/details/131476826