nth-child,nth-of-type

首先，这两个选择器是用来干什么的？ 举例子 p：nth-child(1);这个选择器选择的是p全部父辈元素中第一个子元素，且这个子元素为p，此时就生效。 p:nth-of-type（1）;这个选择器选择的是p全部父辈元素中全部p元素集合中第一个p元素生效。 看下面的例子

div11111111

111111111111

222222222222

s111111111111

s2222222222222

css .p1:nth-of-type(1){ background-color: red; } 这时候，11111111和s11111111会变红。首先选择的是.p1的全部父辈元素中全部.p1元素集合中第一个，因此就是1111111和s111111 若是是.p1:nth-child(1)则只有s11111111会变红，缘由是.p1全部父辈元素( .div1 和 .div11)而后找到他们下面的第一个元素而且是.p1的，而.div1下面的第一个元素是div不是.p1因此没法知足，因此不显示，.div11下面的第一个元素是.p1因此就显示了。 这两个选择器还有好多功能呢. :nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同 :nth-child(-n+4)选取小于等于4标签 :nth-child(2n)选取偶数标签，2n也能够是even :nth-child(2n-1)选取奇数标签，2n-1能够是odd :nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一” :last-child选取最后一个标签 :nth-last-child(3)选取倒数第几个标签,3表示选取第3个