nth-child()与nth-of-type()区别

最新推荐文章于 2024-02-23 19:38:45 发布

sinat_32290679

最新推荐文章于 2024-02-23 19:38:45 发布

阅读量409

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/sinat_32290679/article/details/77621333

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

nth-child()与nth-of-type()都是css3选择器，那么两者有什么区别呢？

例如

p:nth-child(n)

表示选取父元素的下的第n个元素，且这个元素必须是p元素，如果父元素下第n个元素不是p元素。则该选择器将匹配失败。

第n个元素复合的情况下

<!DOCTYPE html>
<html>
<head>
<style> 
.test p:nth-child(3)
{
background:#ff0000;
}
</style>
</head>
<body>
<div class='test'>
<p>第一个元素： p。</p>
<p>第二个元素： p。</p>
<p>第三个元素： p。</p>
<p>第四个元素 p。</p>
<p>第五个元素 p。</p>
</div>
</body>
</html>

这里写图片描述

第三个子元素不是段落的情况：

<!DOCTYPE html>
<html>
<head>
<style> 
.test p:nth-child(3)
{
background:#ff0000;
}
</style>
</head>
<body>
<div class='test'>
<p>第一个元素： p。</p>
<p>第二个元素： p。</p>
<span>第三个元素： span。</span>
<p>第四个元素 p。</p>
<p>第五个元素 p。</p>
</div>
</body>
</html>

结果如下：
这里写图片描述

可见当其父元素下的三个元素不是p元素是，该选择器将无法选择到元素

p:nth-of-type(n)

表示选择父元素下的第n个p元素（第n个p元素,而不论第n元素是否是p元素，而p:nth-child(n)是要求第n个元素必须是p元素的）。
看代码：

<!DOCTYPE html>
<html>
<head>
<style> 
.test p:nth-of-type(3)
{
background:#ff0000;
}
</style>
</head>
<body>
<div class='test'>
<p>第一个元素： p。</p>
<p>第二个元素： p。</p>
<span>第三个元素： span。</span>
<p>第四个元素 p。</p>
<p>第五个元素 p。</p>
</div>
</body>
</html>

结果如下：
这里写图片描述

sinat_32290679

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nth-child()与nth-of-type()区别

nth-child()与nth-of-type()都是css3选择器，那么两者有什么区别呢？例如p:nth-child(n)表示选取父元素的下的第n个元素，且这个元素必须是p元素，如果父元素下第n个元素不是p元素。则该选择器将匹配失败。第n个元素复合的情况下 <!DOCTYPE html><html><head><style> .test p:nth-child(3){backg
复制链接

扫一扫

专栏目录