您的位置:首页 > Web前端 > CSS

css伪类选择器之:first-child和:first-of-type

2017-05-24 16:52 816 查看
前不久使用伪类选择器的时候,发现有两组用法极为相似的,一组是:first-child、:last-child、:nth-child(n),另一组是:first-of-type、:last-of-type、:nth-of-type(n)。谈一谈在使用中的“诡异”,以及两组伪类选择器的区别。

一、first-child“时灵时不灵”

以前对伪类选择器还不是很熟悉的时候,有时候会发现:first-child、:last-child“时灵时不灵”,真是急死老夫了。具体以前写的代码找不到了,找了两端差不多的学习学习:

<style>
p:nth-child(3){color:#f00;}
p:nth-child(4){color:#0f0;}
</style>
<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
<p>第4个p</p>
<p>第5个p</p>
</div>

那么问题来了:

p:nth-child(3){color:#f00;} 这是会命中第3个p么?如果你这么认为那就错了,这条选择符就不会命中任何一个元素。

p:nth-child(4){color:#f00;} 这时你以为会命中第4个p,但其实命中的却是第3个p,因为它是第4个子元素。

二、两组伪类选择器的区别:

针对上面出现的诡异事件,做出如下解答:

E:first-child { sRules } 匹配父元素的第一个子元素E。
E:last-child { sRules } 匹配父元素的最后一个子元素E。
E:nth-child(n) { sRules } 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。

这三个伪类选择器,注意看“child”,是第几个子元素,肯定是相对于父级、相对于兄弟元素来说的,同级即可。

另外一组:

E:first-of-type { sRules } 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type { sRules } 匹配同类型中的最后一个同级兄弟元素E。
E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E。

这三个伪类选择器,注意看“type”,是第几个同类型元素,不仅仅满足同级,排序数字n还要是相同的元素。

三、进阶:

<style>
li:nth-child(even){color:#f00;} /* 偶数 */
li:nth-child(odd){color:#000;} /* 奇数 */
</style>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>

关键字odd代表奇数,even代表偶数

<style>
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
</style>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>

关键字2n+1代表奇数,2n代表偶数。自己慢慢体会
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: