Css中的那些选择器

Css–选择器

前言： CSS选择器是一种用来选择HTML元素并应用样式的工具。它们的意义在于帮助开发者指定要为哪些元素应用样式，从而实现更细粒度的控制和布局。它不仅提供了灵活性和可维护性，还能够优化性能和提高开发效率。

1.标签选择器

• 格式：标签名 {css属性名：属性值； }
• 作用：通过标签名，找到页面中所有这类标签，设置样式
• 注意：
  • 标签选择器选择的是一类标签，而不是单独某一个
  • 标签选择器无论嵌套关系有多深，都能找到对应的标签

示例图：

2.类选择器

• 格式：.类名{css属性名：属性值；}
• 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
• 注意：
  • 所有标签上都有class属性，class属性的属性组称为类名
  • 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
  • 一个标签可以同时有多个类名，类名之间以空格隔开
  • 类名可以重复，一个类选择器可以同时选中多个标签

示例图：

3.id选择器

• 格式：#id属性值{css属性名：属性值；}
• 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
• 注意：
  • 所有标签上都有id
  • id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
  • 一个标签上只能有一个id属性值
  • 一个id选择器只能选中一个标签

示例图：

提醒：在Css中定义多个同名的id可能不会出错，但在js中会出错

4.通配符选择器

• 格式：*****{css属性名：属性值；}
• 作用：找到页面所有的标签，设置样式
• 注意
  • 开发中使用少，只会在特殊情况下才会用到

示例图：

5.后代选择器

• 作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
• 格式：选择器1(父类选择器)+ 空格 + 选择器2(后代选择器){Css}
• 结果：
  • 在选择器1所找到标签的后代（儿子、孙子、重孙子……）中，找到满足选择器2的标签，设置样式
• 注意点：
  • 后代包括：儿子、孙子、重孙子……
  • 后代选择器中，选择器与选择器之前通过空格隔开

示例图：

6.子代选择器

• 作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
• 格式：选择器1(父类选择器) > 选择器(子代选择器){Css}
• 结果：
  • 在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式
• 注意：
  • 子代选择器：儿子（只包括父类的后一代）
  • 子代选择器中，选择器与选择器之间通过 > 隔开

7.并集选择器

• 作用：同时选择多组标签，设置相同的样式
• 格式：选择器1 ，选择器2{Css}
• 结果：
  • 找到选择器1和选择器2选中的标签，设置样式
• 注意：
  • 并集选择器中的每组选择器之间通过 ，(逗号) 分隔
  • 并集选择器中的每组选择器可以是基础选择器或者复合选择器
  • 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

示例图：

8.交集选择器

• 作用：选中页面中同时满足多个选择器的标签
• 格式：选择器1选择器2{Css}（选择器之间无空格隔开）
• 结果：
  • 找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
• 注意：
  • 交集选择器中的选择器之间是紧挨着的，不能分隔
  • 交集选择器中如果有标签选择器，标签选择器必须写在最前面

示例图：

9.hover伪类选择器

• 作用：选中鼠标悬停在元素上的状态，设置样式
• 格式：选择器：hover{Css}
• 注意：
  • 伪类选择器选中的是元素的某种状态

示例图：