nth-child(n)和nth-of-type(n)的区别
1.官方解释： p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 2.大白话 p:nth-child ...
原文：nth-of-type与nth-child的区别
nth of type： 简单来说nth of type会忽略其它标签的顺序而按照标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。下面我们结合具体的例子来了解下。 代码效果如下图所示，文本中的第 个p标签背景颜色发生改变。 nth child： 它的属性就是按照所有类型标签的所谓整体队列进行排序筛选，也就是说不论你是h 还是p标签，使用这个属性你要遵循在DOM树中的顺序来进 ...
2019-04-16 20:28 0 673 推荐指数：
相关推荐
彻底理解nth-child和nth-of-type的区别。
是因为之前觉得自己已经理解了nth-of-type但后来发现好像和自己之前理解的不太一样，于是打算写下 ...
理解nth-child和nth-of-type
css中的nth-child和nth-of-type用于选择父元素下第n个子元素，但是对于他们的理解却不够深入，所以通过这个下面的示例详细展示一下他们的效果。 一、准备页面 本次使用的都是.container下的元素，div和p统一编号为1-8，div元素有类node，会再显示 ...
伪类选择器 :nth-child(even) :nth-child(odd) :nth-of-type
属性 描述 CSS :active 向被激活的元素添加样式。 1 :focus 向拥有键盘输入焦 ...
CSS3中:nth-child和:nth-of-type的区别深入理解
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很简单：:nth-of-type ...
深入理解css3中 nth-child 和 nth-of-type 的区别
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？ 其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele ...
一次性分清nth-child(n)和nth-of-type(n)
nth-child和nth-of-type都是子代选择器，他们的区别就是nth-child强制是父元素的第几个子元素，而nth-of-type要求是同中类型的第几个元素。 可以看到页面没有任何元素变色。原因是该选择器先找到p元素的父元素body，然后找父元素的第一个子元素，body ...
伪类选择器 E:nth-child(n)、E:nth-of-type(n)
结构伪类是css3新增的类型选择器。 E:nth-child(n)、E:nth-of-type(n)就是其中之二。搞懂了这两个，基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了。 首先先用文字语言来描述一下这俩： E:nth-child(n)： 选择父元素下的第n个子元素 ...