CSS伪类选择符归纳

伪类选择符归纳

伪类选择符比较多，不加以归类很难记清楚记全；我们可以先把他分为两类

• 和元素本身状态有关，类似于链接点击前，点击后
• 和元素在DOM结构中所处的位置有关，类似于第n个元素，或者奇数行。

一、和元素本身状态有关

1. :link,:visited,:hover,:active
   • :link指的是超链接在访问前的状态
   • :visited指的是超链接在访问后的转态
   • :hover指的是鼠标悬停在元素上的状态
   • :active指的是鼠标点击元素不放时的转态
     这几个伪类的书写有一定的顺序，:link和:visited的状态表示的是一个静态的状态，即链接要么就是被激活过，要么就是没激活过，激活后的css属性如果与激活前冲突，则覆盖激活前的属性；而:hover和:active是动作属性，设置这样的伪类css的目的就是为了使得执行相应动作时能够显示相应的状态，也就是希望属性冲突时，覆盖静态属性。因此:hover和:active伪类要写在后面从而覆盖静态属性，而:active又是在:hover基础上的动作，因此，:hover在:active之前。
     正常顺序是::link :visited :hover :active
2. :focus,:empty,:checked,:enabled,:disabled,:target
   • :focus设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
   • :empty匹配没有任何子元素（包括text节点）的元素
   • :checked匹配用户界面上处于选中状态的元素(用于input type为radio与checkbox时)
   • :enabled匹配用户界面上处于可用状态的元素
   • :disabled匹配用户界面上处于禁用状态的元素
   • :target匹配相关URL指向的元素
     这些伪类都不太常用，需要可以查询使用。

二、和元素在DOM结构中所处的位置有关

1. child类型：作为孩子该满足的条件
   • :first-child: 元素得是其父元素的第一个子元素才匹配
   • :last-child: 元素得是其父元素的最后一个子元素才匹配
   • :nth-child(n): 元素得是其父元素的第n个子元素才匹配
   • :nth-last-child(n): 元素得是其父元素的倒数第n个子元素才匹配
   • :only-child: 元素得是其父元素的唯一一个子元素才匹配
2. of-type类型：作为同类元素的兄弟该满足的条件
   • :first-of-type: 元素得是其父元素的第一个该类元素才匹配
   • :last-of-type: 元素得是其父元素的最后一个该类元素才匹配
   • :only-of-type: 元素得是其父元素的唯一一个该类元素才匹配
   • :nth-of-type(n): 元素得是其父元素的第n个该类元素才匹配
   • :nth-last-of-type(n): 元素得是其父元素的倒数第n个子元素才匹配
3. 其他
   • not: 排除元素
     例： li:not(:first-child): 元素不是其父元素的第一个子元素的li元素被匹配