,last-child和nth-last-child(1)等同,last-of-type和nth-last-of-type(1)等同。nth-child和nth-of-type在某些时候是效果是相同的不过二者还是有区别的。 可以简单的理解为,nth-child选择:更强调子元素(child),首先选择父元素第2个子元素然后判断是否是p元素。nth-of-type选择:更强调类型(type),首先是p ...
定义区别 定义:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. (n 可以是数字、关键词或公式) 区别 nth-child()与nth-of-type()区别 首先需要注意的是,css中根本没有 nth-of-child()的写法,本...
:nth-of-type :nth-child 说明:.type:nth-child(1)匹配的是type的父元素的子元素中第一个子元素且class是type的h1元素,.type:nth-of-type(1)匹配的是type的父元素的子元素中h1和p元素的第一个class是type的元素,即0和1。 总结: classA:nth-of-type(n) 匹配的是父元素的子元素中,每种类型的元素节点...
1 nth-child 和 nth-of-type的主要区别：2 新建一个HTML文档，3 保存文件，查看初识效果 4 使用nth-child 和 nth-of-type 分别设置背景 5 保存文件，对比两个选择器的所选元素的区别 注意事项 熟悉nth-of-type()选择器的特性 喜欢请投票和点赞
区别:两种匹配的元素不同,“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素,元素类型是有限制的;而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。 1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型...
一、:nth-child 1.1 说明 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。 注意:如果第 N...
一、nth-child( ) 与 nth-of-type( )的定义与用法 nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。
:nth-child和:nth-of-type都是css3的结构伪类选择器,和他们相关的还有一堆其他的结构伪类选择器,如果搞懂了这两个选择器的话,相应的也能搞懂和他们相关的其他结构伪类选择器啦。 这两个选择器,可不像我们看起来的那么简单,他们的作用相近,却又不完全一样。
因为nth-of-type他是当前元素的兄弟元素的第n个,而nth-child是当前元素的兄弟节点的第n个当前元素,所以p:nth-of-type(4)是第四个p元素,只能是p元素的第四个,即 当前元素:nth-of-type无论中间加入什么元素,都只能是当前元素的第n个,而p:nth-child(4)是取第四个兄弟节点的p元素,所以我们发现第三个p被...