首页 > Web开发 > 详细

css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child()

时间:2018-12-20 12:47:11      阅读:161      评论:0      收藏:0      [点我收藏+]

1  element:first-child 选择属于其父元素首个子元素的element元素

 

技术分享图片

注意:div:first-child 必须是其父元素下面的第一个子元素且必须是div元素才能匹配的到

匹配结果:

技术分享图片

 

2  同理:element:last-child 指定其父元素最后一个子元素的element元素

注意:div:last-child  代表其父元素的最后一个元素一定是div才能匹配到

3    :nth-child(n) 选择器匹配属于其父元素的第N个子元素

技术分享图片

 

匹配结果

 

技术分享图片

4, :nth-last-child(n)  匹配属于其父元素的第N个子元素(从后往前)

5,   only-child 匹配属于其父元素的唯一子元素

技术分享图片

技术分享图片

 

css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child()

原文:https://www.cnblogs.com/xubj/p/10148537.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!