2.E:nth-last-child(n) E:nth-last-child(n)选择器和前面的E:nth-child(n)选择器非常的相似,只是这里多了一个“last”,所起的作用和“E:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。就不举例说明了。 二、E:nth-of-type(n) 和 E:nth-last-of-type(n...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){ color: red } 选中第2个元素 image.png 然后是nth-of-type :nth-of-type(2){ color:...
:nth-child(notation) 是 CSS3 规范中新增的一个伪类选择器,用于选中符合 notaion 表达式的目标“子元素”。 该选择器左侧若有其他选择器,表示命中同时符合左侧条件以及 notation 的“子元素”,如:p:nth-child(n+2) 表示命中所有属于其父元素下顺序在第二位的 p 元素。 之前对于 notation 的原理一直不甚理解...
:nth-child只考虑元素在父元素中的位置,而不考虑元素的类型。 如果要选择第二个p元素,需要使用:nth-of-type(2)。 总结: :first-child: 选择父元素的第一个子元素。 :first-of-type: 选择父元素中特定类型的第一个子元素。 :nth-child(n): 选择父元素的第 n 个子元素 (无论类型)。 希望这些例子能清...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){ color: red } 选中第2个元素
:nth-child(an+b) |:nth-child(an-b)---倍数分组匹配,其中a,b均为正整数或0, 举例:li:nth-child(4n+1){color:green;} 或者是4n-7 :nth-child(-an+b)反向倍数分组匹配 ---从第b个开始往回算,最多也不会超过b个。 举例:li:nth-child(-n+5){color:green;} :nth-child...
一、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的区别 首先他们都是属于结构伪类选择器,都可以键入公式、关键词、序号等 不过他们在指定查找元素时会小小的区别 nth-child:会将所有元素进行标号,当查找指定元素是,会先根据序号查找该元素,找到后在与伪类前面的元素进行匹配,匹配一致才赋予样式 如下nth-child...
新增伪类 elem:nth-child(n) 选中父元素下的第n个子元素,n可以接受具体的数值,也可以接受函数。 elem:nth-last-child(n) 作用同上,不过...
结构性伪类选择器—nth-child(n) 用来定位某个父元素的一个或多个特定的子元素。 其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。 也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。