:nth-child(odd)会选择Paragraph 1、Paragraph 2和Paragraph 3,因为它们分别是第一个、第三个和第五个子元素。 :nth-of-type(odd)会选择Paragraph 1和Paragraph 3,因为它们分别是第一个和第三个元素。 选择所有偶数子元素: :nth-child(even)会选择Div 1和Div 2,因为它们分别是第二个和第四个子元素。 :nt...
1、给第一个div五个P标签,给第二个div五个H5标签,分别用nth-child(2)与nth-of-type(2),看看结果是不是一样的,都是第二个变色。 p:nth-child(2){color:red;}h5:nth-of-type(2){color:blue;}星期一星期二星期三星期四星期五段落一段落二段落三段落四段落五 效果图: 2、现在我们对HTML代码做点改动...
我们可以通过限定元素自身所在的父元素的位置来实现不同的效果,主要通过的伪类型选择器是: :first-child; :last-child; :first-nth-child...); :first-of-type; :last-of-type; :only-child; 下面通过一个简单的示例来熟悉一下这些选择器: 效果如下: ...
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。 nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素,后者是查找同类型元素中某个绝对位置的元素。相同...
:nth-of-type 计算公式:a * n的倍数 + b; (n是从0,1,2...开始) :nth-of-type(an + b):是基于相同的兄弟标签元素匹配 :nt...
一、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(n)与nth-child(n)中的n可以是数字、关键词或公式。 数字:也就是上面例子的使用,就不做赘述。 关键词:Odd 、even Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词 注意:第一个子元素的下标是 1 在这里,我们为奇数和偶数 p 元素指定两种不同的背景色: ...
1、:nth-child()选择器:nth-child(n)选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,n可以是数字、关键词或公式。 2、:nth-of-type(n...) :nth-of-type(odd) -上述例子p:nth-of-type(odd):选择的是P的父级元素下的,奇数的P元素,所以是 第一个段落。 和 < 序选择器 在...
nth-child 和 nth-of-type是CSS的两个伪选择器。要对相同位置或相似做操作的时候非常有用。前者的字面意思是选择第几个子元素,后者的字面意思是选择某类型的第几个元素。 首先来看他们的完整格式。 selector:nth-child(an+b) /* 如 tr:nth-child(3), p:nth-child(2n+1) */ ...
一、:nth-child 1.1 说明 :nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型。n可以是数字、关键词或公式。 注意:如果第N个子元素与选择的元素类型不同则样式无效! 1.2 示例 div>p:nth-child(2){ color:red; } 我是第1个段落 ...