nth-last-child()和nth-last-of-type() 的区别、以及选择则倒数几个元素

本文主要是介绍nth-last-child()和nth-last-of-type() 的区别、以及选择则倒数几个元素，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

工作中老用到css选择器对nth-last-child()和nth-last-of-type()用法不是熟练，今天整理下。

最开始看的w3c的中文文档，看的有点蒙，后来发现可能是翻译问题。。。

先说结论：nth-last-of-type()只匹配指定的标签类型，nth-last-child()不管标签类型

举例：

1、nth-last-child()

The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.

最基本的演示：

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-last-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<h6>第三个段落。</h6>
</body>
</html>

效果：

匹配到的p标签的父元素使body标签，body子元素的倒数第二个标签就是第二个段落，虽然倒数第一个子元素不是p标签是h1标签，但是nth-last-child()不管标签类型。

但是要选中目标标签一定要是p标签，像下面这个样就不行了

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-last-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<h6>第二个段落。</h6>
<p>第三个段落。</p>
</body>
</html>

因为匹配到的元素是h6标签，所以不会变色。

2、nth-last-of-type()

The :nth-last-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent, counting from the last child.

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-last-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
</body>
</html>

效果

也成功同样将倒数第二个p标签也就是第二个段落变色。

改一下,将第三个段落改为h6标签。

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-last-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<h6>第三个段落。</h6>
</body>
</html>

效果：

这回将第一个段落变色了。

因为 nth-last-of-type必须要匹配标签类型，所以只计算p标签，忽略了h6标签，那倒数第二个p标签自然就是段落一了。

选择倒数后两个p标签：

p:nth-last-of-type(-n+2)

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-last-of-type(-n+2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p></body>
</html>

选择前两个p标签：

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-last-of-type(n+2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p></body>
</html>

p:nth-last-of-type(n+2)

这篇关于nth-last-child()和nth-last-of-type() 的区别、以及选择则倒数几个元素的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！