:nth-of-child和:nth-of-type

最新推荐文章于 2023-11-07 12:09:48 发布

冬至z

最新推荐文章于 2023-11-07 12:09:48 发布

阅读量711

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/zkx529/article/details/129717719

版权

:nth-of-child

用法： :nth-of-child（n）, n可以为数字或者表达式（例如2n + 1，指的是奇数项）

介绍：第n个孩子

例如 div:nth-of-child（1）等同于 div:first-of-child div的第一个孩子元素（不区分标签和类名）

<div>
  <p></p>
  <div></div>
</div>

会选中<p></p>

:nth-of-type

用法: :nth-of-type（n）, n可以为数字或者表达式（例如2n + 1，指的是奇数项）

介绍: 选择器匹配同类型中的第n个同级兄弟元素。

例如 div:nth-of-type（1），表示选中同级中第一个div

<div>
  <p></p>
  <div class="box"></div>
</div>

此处的div:nth-of-type（1）指的是子级的class="box"的div, 此时选中的是div自身，因为虽然p为div下第一个元素，也是和class="box"的div同级的第一个元素，但是div:nth-of-type（1）选中的是和div同级且也是div的第一个元素（并且类名需要为box）

！类名(.box)等同于div

测试发现添加类名之后，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.box:nth-of-type(2)
{
	background:#ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<div>22</div>
<div class="box">The second paragraph.</div>
<p>The third paragraph.</p>
<p class="box">The fourth paragraph.</p>

</body>
</html>

菜鸟教程在线编辑器