一、:first-child和 :last-child

简单来说,在没有指定父级元素是什么标签的情况下，first-child和last-child就是选中某个标签里面的第一个标签和最后一个标签。

这里我们匹配的是div的第一个和最后一个子元素

毫无疑问，第一个元素和最后一个元素颜色被改变。

当我们父级指定了某个元素标签后，这里我们给他们指定父级元素必须是p元素，再来看看效果。

结果是1的颜色没有变化，因为我们指定的父级元素是p，不符合我们的选择就忽略掉！

二、first-of-type和:last-of-type

在没有指定父级是什么标签来着，他会匹配所有的不同标签类型的出现的第一个标签。

结果是div1、i1、span1的颜色全部变成红色；

当我们指定他们的父级之后，即使他们的最后一个或者第一个不符合条件，还会继续往上或者往下匹配，直至匹配到。

总结 first-child和first-of-type的区别

当没有指定父元素是什么标签的情况下，first-child或者last-child直接选中第一个或者最后一个，first-of-type或者last-of-type会选中出现的所有类型的标签的第一个。

在指定父级元素是什么标签的情况下，first-child如果匹配到父元素类型则样式会生效，没有匹配到则忽略掉，first-of-type如果第一行不符合情况，他会继续向下继续直至匹配到父级同类型或者不生效。

三、nth-child()

nth-child(),括号后面可以直接跟数字、就代表选中第几个。也可以跟公式如：n+1从第一个开始，n代表0。 也可以直接跟(odd（奇数行）、even（偶数行）)。

如图所示，奇数行的颜色为红色，偶数行的颜色为绿色。

效果如图

当我们指定了父级元素以后，入图所示指定他们的父级元素为i。

毫无疑问，只有i的奇偶数行发生了变化。

当我们指定了父元素，但是没有匹配到同类型元素，则会跳过。

这里控制台什么变化也没有。

四、nth-of-type()

nth-of-type(n),当没有指定父级的情况下，则会匹配所有不同类型元素的第n个元素。

这里我们的n是2，所以它会匹配到div2、i2、span2。

当我们指定了它的父级元素以后，它会去匹配符合同类型的第n个元素。

这里匹配的是符合父级元素span的第二个元素，虽然第二个元素为i，但是他会继续往下匹配。

五、empty root checked等

empty见名知意，选择某些为空的元素，p:empty（选择所有p为空的元素）

把第一个p和第二个p选中了，因为只有这两个内容为空。

checked主要是针对表单行为（还有disabled、enabled等），input:checked主要是选择input已经选中的Input。

root主要是用来选择文档的根元素。：root{background:red},这里就不一一展示了。

六、所有的伪元素

www.runoob.com/css/css-pse… 可以在这个链接查看。