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

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

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

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

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


第三步：对上述直属父元素的直属子元素根据标签名分组。示例中分别为
其一：div标签
其二：p标签

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

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