CSS3:nth-child和:nth-of-type的区别
CSS中的伪类选择器:nth-child和:nth-of-type
:nth-child和:nth-of-type都可以选择父元素下的子元素。那么他们的区别是什么?
我们先来看第一种情况:
<div> <p>第一个段落</p> <p>第二个段落</p> </div>
这时候用p:nth-child(2)和p:nth-of-type(2)获取的都是"第二个段落"。
那么再看第二种情况,我们在第一个p前面加一个<h4>
<div> <h4>一个标题</h4> <p>第一个段落</p> <p>第二个段落</p> </div>
这时候用p:nth-child(2)获取的是"第一个段落"。
而用p:nth-of-type(2)获取的是"第二个段落"。
这就是:nth-child和:nth-of-type的区别。
p:nth-child(2)要满足两个条件:
1.父元素的第二个子元素
2.这个子元素必需是p
而p:nth-of-type(2)则选择的是:
1.父元素的第二个为p的子元素
值得一提的是 jquery并不支持:nth-of-type
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步