2021-3-21

css选择器的类型

选择器永远选择的是离大括号最近的元素，前面的所有内容都是对这个元素的条件。

1.基本选择器

• 通配符选择器（只需了解，不使用）
  书写格式：*{声明块}

  星号匹配的是1到多个字母
  例子*{color：red}

元素选择器
书写格式：元素名{声明块}

• 类选择器
  格式：.类名{声明块}
  选择与该类名相匹配的元素，并运用样式
  类名就是在html中有个class属性，类型就是class的属性值。
  格式要求；1.英文小点开头2.类名不能是纯数字及开头，可以用-，_3.尽量见名知意

• ID选择器（留给JS使用，ID的权重是最高的）

​ 书写格式：#ID名{声明块}

​ 注：是匹配html标签中id的值

​ 例子：#gaoliang{color:red;}

​ 再注一个页面ID值不可以重复

• 并集选择器，组合选择器

  书写格式：类名，元素名，ID名{声明块}

  列子：h1，h2,.box，#box{color:red;}

  命名规范（ID，类）

  1.不要以数字开头

  2.包含的字符（字母，数字，下划线，连字符）

  3.区分大小写（大小写敏感）

  2，层次选择器

• 子代选择器；（子级选择器）
  格式：父元素>子元素{声明块}

• 前提：要有元素的嵌套
  特点：只能一层一层的选

​ 后代选择器

​ 格式：祖先元素+空格+后代元素{声明块}

• 兄弟选择器选择器（只能选中当前兄弟元素之后的兄弟元素，不能选中之前的兄弟元素）

  格式：兄弟元素A+“+（临近选择器）”+兄弟元素B{声明块}

  功能：选中紧挨元素A后面的第一个兄弟元素B

  列子：p+p{color：red；}

  格式：兄弟元素A+“~”+兄弟元素B{声明块}

  功能：选中紧挨元素A后面的所有兄弟元素B

  列子：p~p{color：red；}

• 伪类选择器

  选中第N个元素：方式一（第一个元素用first-child,最后一个元素用last-child，选中奇数项p:nth-child（odd或者2n+1），选中偶数项p:nth-child(even或者写2n)，选中前m项格式为p：nth-child(-n+m),选中后m项格式为p：nth-child(n+m)）n的起始值为0

  注：所有的兄弟元素的名字相同，若所有的兄弟元素名字不同，可能无法选中元素。

  格式：：nth-child(n) n是第几个元素

  列子：p：nth-child(3){color:red;} (选中的第三个元素如果是p就变成红色)

  选中第N个元素：方式二使用场景：兄弟元素的名字可以不相同

  格式：元素：nth-of-type(n) n是第几个元素

  列子p：nth-of-type(3){color:red;}

  注：先筛选类型，在结果中选择第n个元素。

• 否定伪类选择器

  格式：元素：not(:nth-child(n))

  列子：除了第三个p元素以外的p元素都变成红色

  p：not(:nth-child(3)){color:red;}

​ 否定多个时结合并集选择器

​ p：not(:nth-child(3)，：nth-child（5）){color:red;}

• 动态伪类选择器

  a标签的4钟状态(按顺序排列)（书写顺序：12345.21345）

  1.未访问Link

  2.已访问visited

  3.激活focus（焦点框）

  4.悬停hover

  5.点击active