CSS3序选择器学习记录

CSS3中序选择器功能让网页中标签添加样式提供了方便，减少了 id 和class 的使用。

下面以 为 p 标签添加样式为例

p:frist-child 这个选择器代表的是网页中同等级别的标签，第一个如果为p 标签时，实现其样式。

p:last-child 有了第一个，就有最后一个，这个表示为同等级别标签中，如果最后一个标签为p 标签，实现其样式。

p:nth-child() 这个选择器的括号中可以填入我们需要制定的位置，如果在同等级标签中，对应位置上为 p 标签的话，就实现其样式。

p:nth-last-child() 这个是倒数的意思，即同等级标签中，由后开始数起，对应位置上如果为 p 标签的话，就实现其样式。

p:only-child 这个标签代表的是同等级标签中，如果单单存在一个 p 标签，不存在其他的标签时，实现其样式。

上面的序选择器都属于同等级不同类型标签时，但是实际情况下，我们总要拜托其他标签来实现功能，所以序选择器还提供下面的功能。

p:frist-of-type 这个选择器与frist-child 类似，但是它会在同等级标签中忽略掉 p 以外的其他标签来进行选择。

p:last-of-type 同样的，有第一个就有最后一个，同等级中相同类型的最后一个实现样式。

p:nth-of-type() 在这个括号中填入的值将在同等级同类型的标签中，实现对应位置的样式。

p:nth-last-of-type() 实现倒数同等级相同类型标签的样式

p:only-of-type 这个代表的是，如果在同一等级中，p标签只存在一个时，实现其样式。

出了上面的是个写法之外，CSS3的序选择器的nth-child 、nth-last-child、nth-of-type、nth-last-of-type中，还提供能了函数功能（xn+y）

其中 x 和 y 为程序员使用，n 代表着当前标签的数目，默认由0开始，知道标签数目结束。

如果想要实现单数个有样式，双数个无样式，可以为2n+1；想要实现双数个有样式，单数个无样式，可以为2n+0。

CSS3还提供了英文写法方便了上面函数的书写，如果想实现单数个有样式，双数个无样式，也可以直接使用英文odd，即为奇数的意思，同样能实现效果。

直接使用英文even，即为偶数的意思，可以实现双数个有样式，单数个无样式。

方便了书写函数的麻烦。~\(≧▽≦)/~