CSS3中:nth-child和:nth-of-type的区别深入理解

ttx9n · 发表于 2014-3-10 17:05:00

关于:nth-child和:nth-of-type的区别之前一直没太注意，经深入理解才发现里面其实暗藏玄机关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。

:nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？

其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，

而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。

这里附上一个小例子：

复制代码代码如下:
<div>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</div>

上面这个例子，.demo li:nth-child(2)选择的是<li>one</li>节点，而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。

q215357618 · 发表于 2023-9-19 13:20:36

还有什么好东西没

123456 · 发表于 2024-6-6 10:19:39

iiguuubhuiuihu

789456 · 发表于 2024-6-17 07:24:56

vcxvcxv

5cf304mn2 · 发表于 2024-7-14 09:59:29

问问问企鹅哇哇哇哇哇

j__j33p · 发表于 2024-9-12 00:42:42

可以，看卡巴

bp5jgbcnt · 发表于 2024-9-14 18:07:47

66666666666666666666

3mfwk4yf · 发表于 2024-10-17 22:07:28

数据库了多久撒快乐的健身卡啦

gc4hg · 发表于 2024-10-18 05:56:53

管灌灌灌灌灌灌灌灌灌灌

jhf · 发表于 2024-12-3 10:17:19

好人好人好人好人

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS3中:nth-child和:nth-of-type的区别深入理解

相关帖子