css伪类:first-child和:first-of-type的区别

最新推荐文章于 2025-03-26 11:45:21 发布

my-coco

最新推荐文章于 2025-03-26 11:45:21 发布

阅读量304

点赞数

分类专栏： css 文章标签： first-child 和first-of-type的区别

本文链接：https://blog.youkuaiyun.com/weixin_45159207/article/details/90720632

版权

css 专栏收录该内容

3 篇文章

订阅专栏

直接举例说明

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>引号</title>
    <style>
    .box, .box2{ border:1px solid #dedede; width:2100px; height:200px; text-align:center}
     .box h1:first-child{color:red}
     .box h2:first-child{color:blue}
     .box h3:first-child{color:green}
     
     .box2 h1:first-of-type{color:red}
     .box2 h2:first-of-type{color:blue}
     .box2 h3:first-of-type{color:green}
     
    </style>
</head>
<body>
<div class="box">
	<h1>H1</h1>
	<h2>H1</h2>
	<h3>H1</h4>
</div>
<div class="box2">
	<h1>H1</h1>
	<h2>H1</h2>
	<h3>H1</h4>
</div>
</body>

效果
在这里插入图片描述
从图片上可以很明显的发现，first-child 只对其父元素的第一个子元素起作用，而first-of-type对其父元素下同类型子元素中的第一个起作用