jQuery :nth-last-of-type() 选择器
实例
选择作为其父元素的第二个 <p> 元素的所有 <p> 元素,从最后一个子元素开始计算:
<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-last-of-type(3)").css("background-color", "yellow");
});
</script>
</head>
<body>
<h2>这是 body 中的标题</h2>
<p>这是 body 中的第一个段落</p>
<p>body 中的第二个段落(以及 body 中的第三个子元素)。</p>
<div style="border:1px solid;">
<span>div 中的 span 元素</span>
<p>div 中的第一个段落</p>
<p>另一个 div 中的第二个段落(以及该 div 中的第三个子元素)。</p>
<p>div 中的最后一个段落</p>
</div><br>
<div style="border:1px solid;">
<p>另一个 div 中的第一个段落</p>
<p>另一个 div 中的最后一个段落</p>
<p>另一个 div 中的最后一个段落(以及该 div 中的第三个子元素)。</p>
</div>
<p>body 中的最后一个段落</p>
</body>
</html>
定义与用法
:nth-last-of-type(n)
选择器选择父元素的第 n 个特定类型的子元素,从最后一个子元素开始计算。
提示: 使用 :nth-last-child() 选择器,选择父元素的第 n 个子元素,无论其类型如何,从最后一个子元素开始计算。
语法
:nth-last-of-type(n|even|odd|formula)
参数 | 描述 |
---|---|
n | 要匹配的每个子项的索引 必须是数字。第一个元素的索引号为 1 |
even | 选择每个偶数子元素 |
odd | 选择每个奇数子元素 |
formula | 指定要使用公式 (an + b) 选择的子元素。 比如: p:nth-last-child(3n+2) : 从最后一个第二段开始,选择每个第三段 |
更多实例
演示选择所有 <div> 元素中第一个 <p> 元素的每个 <p> 元素,从最后一个子元素开始计算
演示如何使用公式 (an + b) 选择不同的子元素
演示如何使用 "even" 偶数 与 "odd" 奇数来选择不同的子元素
:nth-child(), :nth-last-child(), :nth-of-type() 与 :nth-of-last-type() 选择器的不同点
演示 :nth-child(), :nth-last-child(), :nth-of-type() 与 :nth-of-last-type() 选择器的不同点