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)。谈一谈在使用中的“诡异”,以及两组伪类选择器的区别。
那么问题来了:
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还要是相同的元素。
关键字odd代表奇数,even代表偶数
关键字2n+1代表奇数,2n代表偶数。自己慢慢体会
一、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代表偶数。自己慢慢体会
相关文章推荐
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- css 伪类选择器 :nth-child(n) 与:nth-of-type(n)的区别
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
- CSS 选择器 :last-child与:last-of-type的区别
- 伪类选择器之结构选择器::noth-child(n)/:nth-of-type(n)
- css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type
- CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结
- HTML5基础加强css样式篇(结构化伪类选择器:nth-child和nth-of-type比较)(十二)
- CSS :nth-child与:nth-of-type选择器
- css :fitst-of-type与:first-child的区别
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
- first-child first-of-type last-child last-of-type 伪类选择器总结
- 【Web前端】CSS 选择器之 last-child 与 last-of-type
- jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child
- css伪类选择器,:link、:visited、:focus、:hover、:active、:first-child
- css选择器中:first-child与:first-of-type的区别
- CSS入门之其他伪类,first-child,left,right,lang,focus
- css笔记03:伪类first-child
- HTML5基础加强css样式篇(结构化伪类选择器:nth-of-type)(十一)
- css3中nth-child选择器和nth-of-type选择器的区别