nth-child,nth-last-child，only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-

Posted 2020-09-25 江天83

我将这坨伪类分成三组，第一组：nth-child，nth-last-child，only-child第二组：nth-of-type，nth-last-of-type，第三组：first-of-tpye，last-of-type，第四组：first-child，last-child。

==1==

nth-child定义是：其父级的第x个子元素。写法有两种：

p :nth-child(x)

p:nth-child(x)

第一种指的是p的第x个子元素，无需查找，明确指明父级，而子级无论是什么元素都将被选择。

第二种指的是p的父级元素的第x个子元素，此时父级元素并未指定，是该选择器去查询的包含有p元素的父级容器，但此时nth-child选择类型被明确指定了，只能是p元素，因此就会出现从p的父级去查找其子元素的时候，找不到p:nth-child(x)的情况，因为此时是在p的父级元素底下对所有子元素进行索引，x对应的p只有都具备的时候该选择器才能选中元素，换句话说，p的父级下的子元素，只有同时符合既是p元素且索引正好是x，才能被选中。

搞清楚了哈。再说说nth-child括号内可以允许的参数，包括数值，关键词（odd，even）及公式。

数值很好说，就是子元素的索引，该索引不单单指特定元素，而是所有子元素。关键词当然也是子元素的奇偶索引，因为含一个单子元素的情况很多见，因此奇数总是多于偶数比较常见。

公式，an+b，a,b是常数，而n是自然数，也就是0到无穷，变种2n+1，3n+1，-n+7（7以前的数字），而若数字x为n代表所有元素。关于求交并补集，以下两篇博文写的很清楚，不赘述：

http://www.qdfuns.com/notes/17398/84081c84d8c2056c6f4935c3c7fc6bbf:storey-13.html

http://www.qdfuns.com/notes/17398/f5371a84f07992c180561e0272bf800c.html  

http://www.qdfuns.com/notes/17398/fa3777cd51a94d7ab30c87bd479a1471.html

nth-last-child跟nth-child一样，一个正序，一个倒序，而only-child指的是仅仅含有某指定元素或者未指定但是只有一个子元素的。

==2==

第二组，first-chlid和last-child，是nth-child(1)和nth-last-child(1)的简写 ，不赘述。

==3==

第三组nth-of-type，nth-last-of-type，last-of-type，first-of-type，only-of-type。

nth-of-type，nth-last-of-type，可以分别从前到后和从后到前选一组，而first-of-type和last-of-type则只能选第一个和最后一个。相对于第一组，它们的区别在于：

p :nth-of-type(1)

p:nth-of-type(1)

前者会选择所有第一次出现的不同子元素的第一个。比如有10个子元素，其中a3个，span2个，p3个，div一个，em一个，则会将a，span和p的第一个选中，div和em也被选中。因此nth-of-type的最佳用途肯定不是这样使用。而第二种用法则会将p的父级元素下的所有子元素种的第一个选中，索引不会计算其他非p元素。

 

大概就这么多。反正我懂了。其他遇到再说。