请选择 进入手机版 | 继续访问电脑版

湖南新梦想

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 129|回复: 2

first-child、first-of-type、nth-child和nth-of-type的区别

[复制链接]

7

主题

7

帖子

43

积分

新手上路

Rank: 1

积分
43
发表于 2022-6-21 20:28:51 | 显示全部楼层 |阅读模式
公共样式
  1. span,label{
  2.         display: inline-block;
  3.         width: 80px;
  4.         line-height: 30px;
  5.         border: 1px solid #000000
  6. }
复制代码
1、first-child匹配第一个子元素匹配第一个span且是第一个子元素
  1. .test1 span:first-child{
  2.         background-color: #FFA500;
  3. }
  4. <div class="test1">
  5.     <span>111</span>
  6.     <span class="s1">222</span>
  7.     <span class="s1">333</span>
  8.     <span class="s1">444</span>
  9.     <span>555</span>
  10. </div>
复制代码
错误示范(不是第一个子元素)
  1. .test2 .s1:first-child{
  2.         background-color: #FFA500;
  3. }
  4. <div class="test2">
  5.     <span>111</span>
  6.     <span class="s1">222</span>
  7.     <span class="s1">333</span>
  8.     <span class="s1">444</span>
  9.     <span>555</span>
  10. </div>
复制代码

因为第一个子元素span没有.s1,所有匹配不到

2、first-of-type匹配相同类型子元素的第一个匹配第一个label / span类型且是类型中的第一个元素
  1. .test3 .s1:first-of-type{
  2.         background-color: #FFA500;
  3. }
  4. <div class="test3">
  5.     <label class="s1">111</label>
  6.     <label class="s1">222</label>
  7.     <span class="s1">333</span>
  8.     <span class="s1">444</span>
  9.     <span class="s1">555</span>
  10. </div>
复制代码

s1可以匹配两种类型,两个label和3个span,这两种类型的第一个都将被匹配到

错误示范
  1. .test4 .s1:first-of-type{
  2.         background-color: #FFA500;
  3. }
  4. <div class="test4">
  5.     <span>111</span>
  6.     <span class="s1">222</span>
  7.     <span class="s1">333</span>
  8.     <span class="s1">444</span>
  9.     <span>555</span>
  10. </div>
复制代码

.s1匹配到3个span,但是它们的位置不在第一个,所以匹配不到

3、nth-child(n)匹配第n个子元素,序号从1开始,nth-child(1)等同于first-child匹配第2个元素
  1. .test5 .s1:nth-child(2){
  2.         background-color: #FFA500;
  3. }
  4. <div class="test5">
  5.     <span>111</span>
  6.     <span class="s1">222</span>
  7.     <span class="s1">333</span>
  8.     <span class="s1">444</span>
  9.     <span>555</span>
  10. </div>
复制代码
错误示范
  1. .test6 .s1:nth-child(1){
  2.         background-color: #FFA500;
  3. }
  4. <div class="test6">
  5.     <span>111</span>
  6.     <span class="s1">222</span>
  7.     <span class="s1">333</span>
  8.     <span class="s1">444</span>
  9.     <span>555</span>
  10. </div>
复制代码

匹配到3个子元素,但是它们没有在1号位置的

4、nth-of-type(n)匹配相同类型的子元素的第n个,序号从1开始,nth-of-type(1)等同于first-of-type
  1. .test7 .s1:nth-of-type(2){
  2.         background-color: #FFA500;
  3. }
  4. <div class="test7">
  5.     <label class="s1">111</label>
  6.     <label class="s1">222</label>
  7.     <span class="s1">333</span>
  8.     <span class="s1">444</span>
  9.     <span class="s1">555</span>
  10. </div>
复制代码
总结
first-child和nth-child匹配的是子元素的第几个

first-of-type和nth-of-type匹配的是某种类型的第几个

同样的还有last-child、nth-last-child、last-of-type、 nth-last-of-type(n)

以及only-of-type(子元素中同类型元素只有一个)和only-child(只有一个子元素)



回复

使用道具 举报

5

主题

6

帖子

55

积分

注册会员

Rank: 2

积分
55
发表于 2022-6-21 20:44:21 | 显示全部楼层
我超 原批
回复

使用道具 举报

5

主题

7

帖子

46

积分

新手上路

Rank: 1

积分
46
QQ
发表于 2022-6-21 20:54:50 | 显示全部楼层
我焯 原
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|湖南新梦想 ( 湘ICP备18019834号-2 )

GMT+8, 2022-7-1 09:42 , Processed in 0.041925 second(s), 20 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表