CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法

最新推荐文章于 2024-08-18 23:10:11 发布

momo_mom177

最新推荐文章于 2024-08-18 23:10:11 发布

阅读量1k

点赞数 1

文章标签：前端 css css3

本文链接：https://blog.csdn.net/momo_mom177/article/details/124008659

版权

本文详细介绍了CSS3中的`:first-child`和`:first-of-type`选择器的区别。`:first-child`选取父元素下所有元素中的第一个匹配的子元素，而`:first-of-type`则选取父元素下同一类型的第一个元素。通过示例代码展示了这两个选择器的用法，帮助读者理解它们在实际布局和样式应用中的不同。

摘要由CSDN通过智能技术生成

官方链接：CSS3 :first-of-type 选择器

 <div class="parent">
 	<span class="child child1">child1</span>
   	<span class="child child2">child2</span>
   	<div class="child child3">
   		child3
   		<div>child3-1</div>
   		<div>child3-2</div>
   	</div>
   	<div class="child child4">
   		child3
   		<div>child4-1</div>
   		<div>child4-2</div>
   	</div>
 </div>

:first-child 使用，是所有元素中的第一个满足条件就会被选中

// 设置 parent 下面的 第一个child 里面的字体颜色
.parent .child:first-child {
    color: blue;  
    // parent 下面的第一个元素 如果是 child 才会被选中
}

:first-of-type使用，是每一个元素中的第一个都满足条件才选中

.parent .child:first-of-type {
	color: blue;
    // parent 下面 第一个满足该条件的元素如果是child就变成蓝色
    // 例如 我写的 第一个span/ 第一个div 都是 满足 child，就会被选中
    // 如果我的第一个span不是child，那么两个span 都不会被选中
}