CSS教程（二）- CSS选择器

1. 作用

• 匹配文档中的某些元素为其应用样式。
• 根据不同需求把不同的标签选出来。

2. 分类

• 分类
  • 基础选择器
    • 包含 标签选择器、ID选择器、类选择器、通用选择器等
  • 复合选择器
    • 包含 后代选择器、子代选择器、伪类选择器等
      
      

1 标签选择器

• 介绍

  • 又称为元素选择器，根据标签名匹配文档中所有该元素，为页面中某一类标签指定统一的CSS样式。

• 语法

  标签名{属性1: 属性值1;属性2: 属性值2;...
  }
  

• 示例
  

• 说明

  • 选择器：指需设置样式的 HTML 元素。
  • 声明块包含一条或多条用分号分隔的声明。
  • 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
  • 多条 CSS 声明用分号分隔，声明块用花括号括起来。

• 优点

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

• 缺点

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

2 ID选择器

• 介绍

  • 根据元素的 id 属性值匹配文档中唯一的元素，id具有唯一性，不能重复使用。
  • 在 CSS 中 ID选择器以 # 来定义

• 语法

    #id属性值{属性1: 属性值1;属性2: 属性值2;...}
  

• 示例
  

• 注意

  • id属性值自定义，可以由数字、字母、下划线、- 组成，不能以数字开头;
  • 尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示。

• 口诀

  • 样式#定义，结构id调用，只能调用一次
    
    

3 类选择器

• 介绍

• 想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

  • 根据元素的class属性值匹配相应的元素，class属性值可以重复使用，实现样式的复用（简言之：用于查找或选取要设置样式的 HTML元素）

• 语法

  .类名 {属性1: 属性值1;属性2: 属性值2;... 	
  }
  

• 示例
  

• 说明

  • 长名称或词组可以使用中横线来为选择器命名。
  • 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
  • 命名要有意义，尽量使别人一眼就知道这个类名的目的。

• 口诀

  • 样式点定义，结构类调用

• 特殊用法

  1. 类选择器与其他选择器结合使用

     a.c1{ }
     

     • 注意：标签与类选择器结合时，标签在前，类选择器在后

  2. class属性值可以写多个（多个类名之间必必须用 空格 分开），共同应用类选择器的样式

     <p class="c1 c2"></p>
     

• 示例
  

4 通用选择器

• 介绍

  • 通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）。

• 语法

  * {属性1: 属性值1;属性2: 属性值2;...
  }
  

• 说明

  • 通常在最开始对页面设置内边距与外边距的设置（默认body与页面会存在边距）。

    *{padding: 0;margin: 0;
    }
    

• 示例
  

5 群组选择器

• 介绍

  • 也称为并集选择器，可以使用多个不同的选择器为一组元素统一设置样式。

• 语法

  selector1,selector2,selector3{	属性1: 属性值1;属性2: 属性值2;...    
  }
  

• 示例
  
  
  

6 后代选择器

• 介绍

  • 匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)

• 语法

  selector1 selector2{属性1： 属性值1;属性2： 属性值2;...
  }
  

• 说明

  • 匹配selector1中所有满足selector2的后代元素
  • selector1 与 selector2 可以是任意的基础选择器

• 示例
  

7 子代选择器

• 介绍

  • 匹配满足选择器的所有直接子元素，只能选择作为某元素的最近一级子元素

• 语法

  selector1>selector2{属性1： 属性值1;属性2: 属性值2;...    
  }
  

• 说明

  • selector2 必须是 selector1 的亲子元素

• 示例
  

8 伪类选择器

• 介绍

  • 为元素的不同状态分别设置样式，必须与基础选择器结合使用。

• 特点

  • 用冒号（:）表示，如：:hover、:first-child、:last_child

1、链接伪类选择器

• 分类

  :link 	     超链接访问前的状态
  :visited    超链接访问后的状态
  :hover	 鼠标滑过时的状态
  :active     鼠标点按不抬起时的状态(激活)
  

• 示例

  

• 注意

  1. 超链接如果需要为四种状态分别设置样式，则按照以下顺序【LVHA】声明

     :link
     :visited
     :hover
     :active
     

  2. 超链接常用设置 :

     a{/*统一设置超链接默认样式(不分状态)*/
     }a:hover{/*鼠标滑过时改样式*/
     }
     

2、焦点伪类选择器

• :focus

  • 用于选取获得焦点的表单元素。
  • 一般情况 <input> 类表单元素才能获取

• 示例
  

3、结构伪类选择器

• 作用

  • 根据元素的结构关系查找元素

• 选择器

  选择器	说明
  E:first-child	查找第1个E元素
  E:last-child	查找最后一个E元素
  E:nth-child(N)	查找第N个E元素（第1个元素N值为1）

• :nth-child(公式)

  • 作用：根据元素的关系结构查找多个元素。

    公式	功能
    2n	偶数标签
    2n+1； 2n-1	奇数标签
    5n	找到5的倍数的标签
    n+5	找到第5个以后的标签
    -n+5	找到第5个以前的标签

• 示例
  

4、伪元素选择器

• 作用

  • 创建虚拟 元素（伪元素），用来摆放装饰性的内容

• 选择器

  选择器	说明
  E::before	在E元素里面最前面添加一个伪元素
  E::after	在E元素里面最后面添加一个伪元素

• 注意

  • 必须设置 content: “” 属性，用来设置 伪元素的内容，如果无内容，则引号留白即可
  • 微元素必须是 行内 显示模式
  • 权重 和 标签选择器 相同。

• 应用场景

  • 插入内容‌：使用::before和::after伪元素在元素的前后插入内容，如在段落前添加引用符号、图标装饰等‌
  • 分割符号‌：使用::before和::after伪元素在列表项之间添加分割线或其他符号，提高列表的可读性‌
  • 清除浮动‌：使用::after伪元素来清除浮动，保证容器正确包裹元素‌
  • 首行缩进‌：使用::first-line伪元素来设置元素内第一行的样式，如字体、颜色等‌
  • 首字母样式‌：使用::first-letter伪元素来设置元素内第一个字母的样式，如字体大小、颜色等‌

• 示例
  

---

• 总结