8.CSS-序选择器

序选择器

CSS3中新增的选择器中最具代表性的就是序选择器。

同级别的第几个

:first-child

选中同级别中的第一个标签。
注意点：不区分类型

:last-child

选中同级别中的最后一个标签。
注意点：不区分类型

nth-child(n)

选中同级别中的第n个标签。
注意点：不区分类型
:nth-child(odd)
选中同级别中的所有奇数标签；
:nth-child(even)
选中同级别中的所有偶数标签；
:nth-child(xn+y)
x和y是用户自定义，而n是一个计数器，从零开始递增。

p:nth-child(2n+0){
      color: red;
    }

:nth-last-child(n)

选中同级别中的倒数第n个标签。
注意点：不区分类型

:only-child

选中父元素中唯一的元素。

同类型的第几个

:first-of-type

选中同级别中同类型的第一个标签。

:last-of-type

选中同级别中同类型的最后一个标签。

nth-of-type(n)

选中同级别中同类型的第n个标签。
:nth-of-type(odd)
选中同级别中同类型的所有奇数标签；
:nth-of-type(even)
选中同级别中同类型的所有偶数标签；

:nth-last-of-type(n)

选中同级别中同类型的倒数第n个标签。

:only-of-type

选中父元素中唯一类型的某个标签。