CSS选择器讲解!!!

快来打我* 2023-10-15 09:39 102阅读 0赞

### CSS选择器 ###

*  一. 常用的CSS基本选择器
 *   *  1.标签(元素)选择器
     *  2.类选择器
     *  3.id选择器
     *  4.类选择器和标签选择器的区别
     *  5.通配符选择器
 *  二.复合选择器(2种)
 *   *  1.交集选择器
     *  2.并集(群组)选择器
 *  三.属性选择器
 *  四.关系选择器
 *   *  1.后代选择器
     *  2.子代选择器
     *  3.相邻兄弟选择器
     *  4.通用兄弟选择器
 *  五.伪元素选择器
 *  六.CSS选择器优先级

# 一. 常用的CSS基本选择器 #

## 1.标签(元素)选择器 ##

**结构**: `标签名{CSS属性名:属性值}`

**作用**: 通过标签名,找到页面中所有这类标签,并根据自定义的属性值设置样式.

**注意事项**:

*  标签选择器选择的是一类的标签,而不是单独一个 .
 *  标签选择器无论嵌套的多深,都能找到对应的标签.

运行结果:

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

## 2.类选择器 ##

**结构**:`.类名{CSS属性名:属性值}`

**作用**: 通过类名,找到页面中所有带有这个类名的标签,并设置样式.

**注意事项**:

*  所有的标签上都有class属性,class属性的属性值就是之前定义的类名.
 *  类名可以由数字,字母,下划线,中划线组成,但是不能以数字开头或中划线开头.
 *  一个标签中可以有多个类名,类名之间通过空格隔开.
 *  类名可以重复使用,一个类选择器可以同时选择多个标签.

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

## 3.id选择器 ##

**结构**:`#id属性值{css属性名:属性值}`

**作用**: 通过id属性值,找到页面中带有这个id属性值的标签,并设置样式.

**注意事项**:

*  所有的标签上都有id属性.
 *  id属性值就像身份证号码,在一个页面中是唯一的,不可重复的.
 *  一个标签上只能有一个id属性值
 *  一个id选择器只能选择一个标签

## 4.类选择器和标签选择器的区别 ##

<table> 
 <thead> 
  <tr> 
   <th>区别</th> 
   <th>类选择器</th> 
   <th>id选择器</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>结构</td> 
   <td>" . "开头</td> 
   <td>" # "开头</td> 
  </tr> 
  <tr> 
   <td>可重复</td> 
   <td>可以重复使用,一个标签可以有多个class类名通过空格隔开</td> 
   <td>不可重复,一个标签里面只能有一个ID属性值</td> 
  </tr> 
  <tr> 
   <td>实际开发</td> 
   <td>类选择器用的多</td> 
   <td>id一般配合js来使用,除非情况特殊,一般不给id设置样式</td> 
  </tr> 
 </tbody> 
</table>

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

**结构**: `*{css属性名:属性值}`

**作用**:找到页面里包含的所有样式,然后设置样式

**注意**:

*  开发中应用极少,只有在特殊的情况下在会使用
 *  页面中经常会用在维持边框大小,如下

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

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

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

最终代码:

# 二.复合选择器(2种) #

## 1.交集选择器 ##

**结构**: `选择器1选择器2{css样式}`(中间不由空格隔开)

**作用**:找到标签中既能被选择器1又能被选择器2选中的标签,并设置样式.

**注意**:

*  交集选择器中如果有标签选择器,标签选择器放在第一位.
 *  选择器之间没有任何东西隔开,紧挨着的!!!

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

## 2.并集(群组)选择器 ##

**结构**: `选择器1,选择器2{css样式}`

**作用**:同时选择多组标签设置相同的样式

**结果**:只需要符合其中一个选择器就可以应用该样式.

**注意**:

*  选择器与选择器之间用" , "隔开.
 *  可以是基础选择器或者复合选择器
 *  每组选择器通常一行写一个,提高代码可读性.

# 三.属性选择器 #

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[属性]</td> 
   <td>选中含有指定属性的元素</td> 
  </tr> 
  <tr> 
   <td>[属性 = 属性值]</td> 
   <td>选中含有指定属性并且等于指定属性值的元素</td> 
  </tr> 
  <tr> 
   <td>[属性 ^= 属性值]</td> 
   <td>选中指定属性并且由指定属性值开头的元素</td> 
  </tr> 
  <tr> 
   <td>[属性 $= 属性值]</td> 
   <td>选中指定属性并且由指定属性值结尾的元素</td> 
  </tr> 
  <tr> 
   <td>[属性 *= 属性值]</td> 
   <td>选中指定属性并且包含指定属性值的元素</td> 
  </tr> 
  <tr> 
   <td>[属性] ~= 属性值</td> 
   <td>选中指定属性并且该属性的值包含一个完整的指定属性值</td> 
  </tr> 
  <tr> 
   <td>[属性 I= 属性值]</td> 
   <td>选中指定属性,且该属性的值只有一个为指定属性值或有多个但是要以 '属性值- '开头的</td> 
  </tr> 
 </tbody> 
</table>

默认样式:

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

现在在style标签内写入1~7个方法的修饰样式:

# 四.关系选择器 #

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>父亲&gt;儿子</td> 
   <td>儿子单个选择</td> 
  </tr> 
  <tr> 
   <td>祖先 后代</td> 
   <td>后代全部选择</td> 
  </tr> 
  <tr> 
   <td>兄+弟</td> 
   <td>相邻兄弟选择(必须是兄弟且严格相邻)</td> 
  </tr> 
  <tr> 
   <td>兄~弟</td> 
   <td>全部兄弟选择</td> 
  </tr> 
 </tbody> 
</table>

## 1.后代选择器 ##

后代选择器（descendant selector），别称包含选择器，是一种多个用空格分隔的选择器。

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

## 2.子代选择器 ##

CSS 子代选择器是指能够选择指定元素下一级子元素的 CSS 选择器。在 HTML 中，子元素通常是包含在父元素的括号里，子元素可以是任何 HTML 元素，包括标签、文本和其他元素。

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

> 可以看出，使用子代选择器可以更精确地选择元素，避免样式泄露和不必要的继承。通过这种方法，可以创建更具有层次结构的样式表，使样式更加清晰、易于维护。
> 
> 需要注意的是，子代选择器只选择下一级子元素，如果需要选择更深层次的子元素，可以使用后代选择器或邻接选择器。
> 
> 总之，子代选择器是一种非常有用的 CSS 选择器，能够提高样式表的可读性和可维护性，在开发过程中应该充分利用。

## 3.相邻兄弟选择器 ##

我们看下面代码:

可以发现,除了" 你好5 ",其余的所有元素均为兄弟元素,而相邻兄弟元素就是紧挨着的两个标签.

你好1~4的父亲元素是body.他们之间是兄弟元素,其中1,2相邻,2,3相邻,3,4相邻.称为相邻兄弟.

如果我想给"你好3"加上内部修饰样式,我该如何操作?

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

## 4.通用兄弟选择器 ##

依旧是上面的代码:

此时我想让div的兄弟元素的样式都被修改该如何操作?

我们将上面的相邻兄弟修改器改成如下,此时就是通用兄弟选择器

我们运行如下代码:

运行结果:

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

> 如果此时我只想给" 你好5 "进行样式修改如何做?

运行结果:

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

# 五.伪元素选择器 #

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

常见的几个伪元素：

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的元素

::before 元素开始的位置前

::after 元素结束的位置后

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

# 六.CSS选择器优先级 #

（1）CSS选择器都有权重值，权重值越大优先级越高。

*  内联样式表的权重值最高，值为1000。
 *  id选择器的权重值为100。
 *  class选择器的权值为10。
 *  类型（元素）选择器的优先级为1。
 *  通配符选择器的优先级为0。

（2）当权值相等时，后定义的样式表要优于先定义的样式表。(也就是按照源码的执行顺序,从上到下)

（3）在同一组属性设置中表有\*\*“!important"\*\*规则的优先级最大。

[01559bb487d3441f8a3f703570d5e9e5.png]: https://img-blog.csdnimg.cn/01559bb487d3441f8a3f703570d5e9e5.png
[0c431ab33f864ec49f8270cd4d91c290.png]: https://img-blog.csdnimg.cn/0c431ab33f864ec49f8270cd4d91c290.png
[37fa474abb4740e28f5b3e5441324803.png]: https://img-blog.csdnimg.cn/37fa474abb4740e28f5b3e5441324803.png
[cb97e373f0e448ea9a5b77b7a0e5ea2c.png]: https://img-blog.csdnimg.cn/cb97e373f0e448ea9a5b77b7a0e5ea2c.png
[5f0864d560704e10b91b04541b172674.png]: https://img-blog.csdnimg.cn/5f0864d560704e10b91b04541b172674.png
[c0693d5c5457451580f3e46e5105eb34.png]: https://img-blog.csdnimg.cn/c0693d5c5457451580f3e46e5105eb34.png
[225d4ef981c84c40b1807edf3beee2d3.png]: https://img-blog.csdnimg.cn/225d4ef981c84c40b1807edf3beee2d3.png
[fb531bf11aab4dc7a207aeeaad10caed.png]: https://img-blog.csdnimg.cn/fb531bf11aab4dc7a207aeeaad10caed.png
[595c4f1811064da0afd4192e2c70fa49.png]: https://img-blog.csdnimg.cn/595c4f1811064da0afd4192e2c70fa49.png
[8a103dce153046548a681a9c48dbec0c.png]: https://img-blog.csdnimg.cn/8a103dce153046548a681a9c48dbec0c.png
[dbbbb47b50194f5bb14a2277234dceba.png]: https://img-blog.csdnimg.cn/dbbbb47b50194f5bb14a2277234dceba.png
[278647dc30904c21bf5d6de116affd07.png]: https://img-blog.csdnimg.cn/278647dc30904c21bf5d6de116affd07.png