1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,n 可以是数字、关键词或公式。 2、:nth-of-type(n) :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,n 可以是数字、关键词或公式。 3、具体区别 首先看代码 p:nth-of-...
区别:两种匹配的元素不同,“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素,元素类型是有限制的;而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。 1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型...
因为nth-of-type他是当前元素的兄弟元素的第n个,而nth-child是当前元素的兄弟节点的第n个当前元素,所以p:nth-of-type(4)是第四个p元素,只能是p元素的第四个,即 当前元素:nth-of-type无论中间加入什么元素,都只能是当前元素的第n个,而p:nth-child(4)是取第四个兄弟节点的p元素,所以我们发现第三个p被p...
nth-child()与nth-of-type()区别 首先需要注意的是,css中根本没有nth-of-child()的写法,本人有时会写成这种形式,导致效果出不来。 其次,不管是nth-child(n),还是nth-of-type(n),两者()中的...是你想找谁,是div,还是h3,或者是p),二:这个孩子在家排行第几(不管他前面的兄弟是什么类型的元素,依次排下...
nth-child 和 nth-of-type的区别 简介 CSS选择器 nth-child 和 nth-of-type 的区别？请参考以下内容：工具/原料 计算机 CSS 方法/步骤 1 nth-child 和 nth-of-type的主要区别：2 新建一个HTML文档，3 保存文件，查看初识效果 4 使用nth-child 和 nth-of-type 分别设置背景 5 保存文件，对比两个选择器...
:nth-child和:nth-of-type都是css3的结构伪类选择器,和他们相关的还有一堆其他的结构伪类选择器,如果搞懂了这两个选择器的话,相应的也能搞懂和他们相关的其他结构伪类选择器啦。 这两个选择器,可不像我们看起来的那么简单,他们的作用相近,却又不完全一样。
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, ...
jQuery中nth-child()和nth-of-type()选择器的区别 在本文中,我们将讨论jQuery中的nth-child()和nth-of-type()选择器之间的所有区别。 nth-child()选择器 这个选择器用于根据元素在一组兄弟元素中的位置来匹配它们。它匹配父元素的第n个子元素,无论其类型是什么。 语法
nth-of-type会忽略其它标签的顺序而按照标签自身种类的顺序进行筛选 nth-child是按照所有类型标签的所谓整体队列进行排序筛选,也就是说不论你是h1还是p标签,使用这个属性你要遵循在DOM树 中的顺序来进行操作 网站常用效果展开查看更多 <!DOCTYPE html>网站常用效果展开查看更多.sec{ width: 100%; max-width: 640px...