伪类选择器

Posted 2020-12-12 pengnima

伪类选择器

伪类选择器前面都有 : (冒号)

• 除了 hover，其他一般用于链接

  • link —— 对 鼠标点击之前(未被访问)
  • hover —— 对 鼠标指针悬停
  • active —— 对 鼠标点击
  • visited —— 对 鼠标点击之后(已被访问)
  • target —— 可用于选取当前活动的目标元素，有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素

• 普遍

  • root —— 匹配文档根元素，在 html 中，根元素始终是 html 元素。
  • focus —— 对 获得焦点
  • checked —— 对 选中的 radio,checkbox,option
  • disabled —— 对 带有 disabled 属性
  • enabled —— 对 不带 disabled 属性
  • empty —— 对 不带任何子元素(包括文本节点)
  • invalid —— 对 非法的表单元素值(例如元素值 min,max 限定，email 格式等)
  • valid —— 对 合法的表单元素值
  • optional —— 对 非必选的表单元素，即没有设置 required 属性的标签为 optional
  • required —— 对 必选的表单元素

• 位置关系

  • first-child —— 匹配 任意父元素的 第一个子元素，该子元素要是冒号前的元素
  • last-child —— 匹配 任意父元素的 最后一个子元素，同上
  • first-of-type —— 匹配 任意父元素的 第一个 该标签 的孩子
  • last-of-type —— 匹配 任意父元素的 最后一个 该标签 的孩子

• 位置关系

  • nth-child(n) —— 对 任意元素的第 n 个孩子
  • nth-last-child(n) —— 同上，但是从后往前数的第 n 个
  • nth-of-type(n) —— 对 任意元素的第 n 个 该标签的孩子
  • nth-last-of-type(n) —— 同上，但从后往前数
  • only-child —— 匹配其父元素的 唯一子元素 的每个元素。(只能有 1 个孩子，且就是该标签的)
  • only-of-type —— 匹配其父元素的 特定类型的唯一子元素 的每个元素。(可以有多个孩子，但该标签的只能有 1 个)