nth-child,nth-last-child,only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child伪类区别和用法

我将这坨伪类分成三组,第一组: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元素。

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

原文地址:https://www.cnblogs.com/jiangtian/p/7094074.html