nth-child()和nth-of-type()的区别
Posted cn-oldboy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了nth-child()和nth-of-type()的区别相关的知识，希望对你有一定的参考价值。
两者都是选择器，在CSS和JS中，都可以用来选择元素。得到一个元素，或者元素集。
x:nth-child(n) 获取 x元素的父元素中，第n个元素。无类型限制。
x:nth-of-type(n) 获取x元素父元素中，第n个x元素。限制了类型。
因此，仅仅从字面意义上，就能做好区分了，一个是限制了类型，一个是不限制。
关于其中的参数，可以是数字，也可以表达式，也可以是固定的字母。
el:nth-child(2)：选择父元素列表中的第 2 个标签。
el:nth-child(n)：选择父元素列表中的第 n 个标签。
el:nth-child(2n)：选择父元素列表中的第 2n 个标签，也就是偶数个元素。
el:nth-child(n+n)：选择父元素列表中的第 n 个标签后的标签。
el:nth-child(-n+n)：选择父元素列表中的第 n 个标签之前的标签。
el:nth-child(odd)：选择父元素列表中的是奇数的标签。
el:nth-child(even)：选择父元素列表中的是偶数的标签。
el:nth-child(n+3)：未知
el:nth-child(n-3)：未知
以上是关于nth-child()和nth-of-type()的区别的主要内容，如果未能解决你的问题，请参考以下文章
CSS3中:nth-child和:nth-of-type的区别深入理解
nth-child() 和 nth-of-type() 的区别