css3全部新增伪类测试

210 阅读1分钟

以p为例:

p:last-of-type 选择该选择器所有子树的最后一个p。 

p:last-child 这个比上一个需要满足的条件多一个:选择所有子树的最后一个是<p>的元素。 


接下来两个可以同上类比: 

p:first-of-type 选择该选择器所有子树的第一个p。

P:first-child 这个比上一个需要满足的条件多一个:选择所有子树的第一个是<p>的元素。


p:only-child 选择该选择器下所有子树的惟一的那个<p>。简单说来,就是这个子树下有且只有<p>,而且p的数量是一个,才能把这个p选中。  

p:only-of-type 不同的是这个比上面那个相对宽松,只要子树下只有一个p(可以有其他元素),就能选上。 


选第N个:

p:nth-child(n) 选择器父元素的第n个,且刚好是p的元素。

* n的取值可以是odd或是even,odd代表奇数,even代表偶数。

p:nth-last-child(n) 描述同上,只不过是倒着数的。

p:nth-of-type(n) 选择其父元素的第n个元素是p的元素。

p:nth-last-of-type(n)描述同上,从最后一个子元素开始计数。


其他

element:empty 没有子元素的element元素

element:enable 选择每个已启动的元素

element:disable 选择每个已禁止的元素

element:chacked 选择每个被选中的元素

element:target 选择当前活动的元素