码迷,mamicode.com
首页 > 其他好文 > 详细

E:nth-last-child(n)

时间:2019-12-16 15:02:26      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:元素   tar   示例   ref   ast   child   http   col   参考   

E:nth-last-child(n)

语法:

E:nth-last-child(n) { sRules }

说明:

匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。大理石平台维修
  • 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
  • 该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中倒数第一个子元素E,那么选择符可以写成:E:nth-last-child(1)
  • 有一点需要注意的是:

    HTML示例代码:

    <div><p>第1个p</p><p>第2个p</p><span>第1个span</span><p>第3个p</p><span>第2个span</span></div>

    如上HTML,假设要命中倒数第一个p(即正数第3个p),那么CSS选择符应该是:

    p:nth-last-child(2){color:#f00;}

    而不是:

    p:nth-last-child(1){color:#f00;}

    因为倒数第1个p,其实是倒数第2个子元素。基于选择符从右到左解析,首先要找到第1个子元素,然后再去检查该子元素是否为p,如果不是p,则n递增,继续查找

    假设不确定倒数第1个子元素是否为E,但是又想命中倒数第1个E,应该这样写:

    p:last-of-type{color:#f00;}

    或者这样写:

    p:nth-last-of-type(1){color:#f00;}

    参考 E:last-of-type 和 E:nth-last-of-type(n)

E:nth-last-child(n)

标签:元素   tar   示例   ref   ast   child   http   col   参考   

原文地址:https://www.cnblogs.com/furuihua/p/12049043.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!