搜索
  • CSS - 结构伪类选择器 - nth-last-child的语法及用例
  • 发布于 2个月前
  • 167 热度
    0 评论
语法
# 语法
选择器:nth-last-child(n) {}

# 参数n
# even：代表排序为偶数的元素，计数从1开始
# odd：代表排序为奇数的元素，计数从1开始
# 正整数：代表排序为正整数的元素
# 表达式：代表表达式结果对应排序的元素。计数从1开始
#     示例：3n代表排序为3、6、9...的元素
作用
给满足选择器条件的元素的直属父元素的倒数指定排序的直属子元素（仅选取满足选择器条件的直属子元素）设置样式

示例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>堆代码 duidaima.com</title>
        <style type="text/css">
            .one,
            .two,
            .three {
                padding: 10px;
                border: 1px solid #999;
                margin: 10px;
            }
    
            .red div:nth-last-child(2) {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="one">
            <div>one - 第一个元素</div>
            <p>one - 第二个元素</p>
        </div>
        <div class="two red">
            <div>two - 第一个元素</div>
            <p>two - 第二个元素</p>
        </div>
        <div class="three red">
            <p>three - 第一个元素</p>
            <div>three - 第二个元素</div>
        </div>
    </body>
</html>

逻辑分析
第一步：查找满足选择器 .red div 的元素。示例中可以看到仅有两个元素满足条件
其一：文本内容为 two - 第一个元素 的元素
其二：文本内容为 three - 第二个元素 的元素

第二步：查找上述两个元素的直属父元素。示例中分别为
其一：类名含 two 的元素
其二：类名含 three 的元素

第三步：查看上述两个直属父元素的倒数第二个直属子元素是否满足选择器 .red div 。示例中可以看到仅有“文本内容为 two - 第一个元素 的元素”满足，所以需要给该元素设置样式。

注意：查找选择器对应的元素、父元素、子元素时，均仅查找元素节点
用户评论
可能感兴趣的话题