图解CSS选择器状态伪类

1 本文简介

在CSS伪类中，主要分为操作状态伪类、选择器状态伪类和表单状态伪类几种，本文要介绍的选择器状态伪类在规范中大概有十几种，本文仅介绍常见的类型，即与type有关的选择器状态伪类和与child有关的选择器状态伪类两种。

2 选择器状态伪类

与type有关的选择器状态伪类有如下五种：

• element:first-of-type：选择父元素下的第一个类型为element的元素；
• element:last-of-type：选择父元素下的最后一个类型为element的元素；
• element:nth-of-type(n)：选择父元素下的第n个类型为element的元素；
• element:nth-last-of-type(n)：选择父元素下的倒数第n个类型为element的元素；
• element:only-of-type：选择父元素下的唯一的类型为element的元素。

与child有关的选择器状态伪类有如下五种：

• element:first-child：选择父元素下的第一个类型为element的元素，若该元素不是element类型，则选择失败；
• element:last-child：选择父元素下的最后一个类型为element的元素，若该元素不是element类型，则选择失败；
• element:nth-child(n)：选择父元素下的第n个类型为element的元素，若该元素不是element类型，则选择失败；
• element:nth-last-child(n)：选择父元素下的倒数第n个类型为element的元素，若该元素不是element类型，则选择失败；
• element:only-child：选择父元素下的唯一的类型为element的元素，若该元素不是element类型，则选择失败。

2.1 type相关

1. element:first-of-type：选择父元素下的第一个类型为element的元素。如下面例子中span:first-of-type会匹配所有拥有子元素span的父元素，并忽略父元素中的非span元素，再匹配各个父元素中的第一个span，将其背景颜色置为红色。注意，只需要父元素下有span即可，并不需要span为父元素的第一个子元素。

2. element:last-of-type：选择父元素下的最后一个类型为element的元素。如下面例子中，span:last-of-type会匹配所有拥有子元素span的父元素，并忽略父元素中的非span元素，再匹配各个父元素中的最后一个span，将其背景颜色置为红色。

3. element:nth-of-type(n)：选择父元素下的第n个类型为element的元素。如下面例子中，span:nth-of-type(2)会匹配所有拥有子元素span的父元素，并忽略父元素中的非span元素，再匹配各个父元素中的第2个span，将其背景颜色置为红色，若第2个span不存在，则匹配失败。

4. element:nth-last-of-type(n)：选择父元素下的倒数第n个类型为element的元素。如下面例子中，span:nth-last-of-type(2)会匹配所有拥有子元素span的父元素，并忽略父元素中的非span元素，再匹配各个父元素中的倒数第2个span，将其背景颜色置为红色，若倒数第2个span不存在，则匹配失败。

5. element:only-of-type：选择父元素下的唯一的类型为element的元素。如下面例子中，span:only-of-type会匹配所有拥有子元素span的父元素，再判断各个父元素中是不是只有一个span元素，将其背景颜色置为红色，若父元素中还有其他子元素，则匹配失败。

2.2 child相关

1. element:first-child：选择父元素下的第一个类型为element的元素，若该元素不是element类型，则选择失败。如下面例子中span::first-child会匹配所有拥有子元素span的父元素，再判断父元素中的第一个元素是不是span，若是span则将背景颜色置为红色，否则匹配失败。

2. element:last-child：选择父元素下的最后一个类型为element的元素，若该元素不是element类型，则选择失败。如下面例子中span:last-child会匹配所有拥有子元素span的父元素，再判断父元素中的最后一个元素是不是span，若是span则将背景颜色置为红色，否则匹配失败。
   

3. element:nth-child(n)：选择父元素下的第n个类型为element的元素，若该元素不是element类型，则选择失败。如下面例子中span:nth-child(2)会匹配所有拥有子元素span的父元素，再判断父元素中的第2个元素是不是span，若是span则将背景颜色置为红色，否则匹配失败。
   

4. element:nth-last-child(n)：选择父元素下的倒数第n个类型为element的元素，若该元素不是element类型，则选择失败。如下面例子中span:nth-last-child(2)会匹配所有拥有子元素span的父元素，再判断父元素中的倒数第2个元素是不是span，若是span则将背景颜色置为红色，否则匹配失败。
   

5. element:only-child：选择父元素下的唯一的类型为element的元素，若该元素不是element类型，则选择失败。如下面例子中span:only-child会匹配所有拥有子元素span的父元素，再判断各个父元素中是不是只有一个span元素，若是span则将背景颜色置为红色，否则匹配失败。
   

3 type和child的区别

type和child各有五种伪类选择器，其逻辑大致相同，最大的区别就是type不关注被选元素在父元素中的位置，只关注被选元素与其他被选元素之间的顺序关系；而child关注被选元素在父元素中的位置，若位置不对应则匹配失败。如下面例子：

所以说在选择范围没有越界的情况下，并且被选元素存在时，child是有可能出现匹配失败的现象（即被选择元素的位置与其在父元素中的位置不对应），而type一定会匹配到元素。