简述CSS选择器

前言
这篇文章我会根据自己所学知识对CSS添加样式的选择器使用进行简单阐述，因为是学习期间的知识，存在理解不完善，不够专业的情况，仅供参考。
CSS选择器类别
目前根据我所学知识，CSS选择器我目前所掌握的分为几大类：基础选择器，层次选择器，伪类选择器，动态伪类选择器等…因为知识储备量目前仅有这些，所以没提到的其他选择器，可以去网上查看
选择器思维导图

选择器的作用：选择页面上的某些元素应用CSS样式

注：选择器选中的是离大括号最近的元素，其他都是对这个元素的条件

接下来分类介绍一下选择器用法和作用

• 基本选择器

  • 元素选择器
    书写格式：元素名{声明块}
  • 通配符选择器
    书写格式：*{声明块}
    注：*匹配页面的多个元素
  • 类选择器
    书写格式：.类名{声明块}
    注：类名匹配html标签中class的值
  • ID选择器
    书写格式：#ID名{声明块}
    注：ID名匹配html标签中ID的值
    ​ 一个页面ID值不可以重复
    ​ 目前相比其他选择器权重最高
  • 并集选择器
    书写格式：元素名,类名,ID名{声明块}
    注：三个名称可以任意选择搭配，中间英文逗号分隔
  • 命名规范（适用于类选择器，ID选择器）
    1、不要以数字开头
    2、包含的字符：字母、数字、下划线、连字符
    3、区分大小写，大小写敏感【大小写对应错误无法应用样式】

• 层次选择器

  • 子集选择器
    书写格式：父元素>子元素{声明块}
  • 后代选择器
    格式：祖先元素+空格+后代元素{声明块}
  • 兄弟选择器（目前只能选中选择的元素后面的兄弟元素）
    1、格式：选中的元素A+兄弟元素B{声明块}
    功能：选中元素A的第一个兄弟元素（即相邻选择器）
    2、格式：选中的元素A~兄弟元素名B{声明块}
    功能：选中元素A后面的所有兄弟元素B，不需要紧挨着，中间可以穿插其他元素

• 伪类选择器

  • 选中第n元素
    • 格式：元素名:nth-child(n){声明块}
      使用场景：所有兄弟元素的名字相同
      若所有兄弟元素的名字不相同，可能会无法选中
    • 格式：元素名:nth-of-type(n){声明块}
      使用场景：所有兄弟元素的名字可以不相同
      先筛选类型，在结果中选择第n个元素
  • 选中第一个元素
    格式：元素名:first-child{声明块}
  • 选中最后一个元素
    格式：元素名:last-child{声明块}
  • 选中奇数项元素
    格式：元素名:nth-child(odd)/(2n+1)
  • 选中偶数项元素
    格式：元素名:nth-child(even)/(2n)
  • 注：n的起始值为0
    伪类选择器选中的是离大括号最近的元素，其他都是对这个元素的条件，如选中的元素名和html内元素无法对应上，不改变样式
  • 伪类选择器扩展：
    选中前m个元素的公式：元素名:nth-child(-n+m)

• 否定伪类选择器
  格式：元素名:not(:nth-child(n)){声明块}

• 动态伪类选择器
  格式：元素名:link/visited{声明块}
  1、鼠标未访问link
  2、鼠标已访问visited
  3、鼠标悬停（移入）hover
  4、鼠标点击active

  扩展：tab激活焦点框focus