1.选择第二个 元素时: p:nth-of-type(2) {/* 设置样式 */background-color: green; } 2.选择所有奇数位置的 元素时,使用关键词 odd: p:nth-of-type(odd) {/* 设置样式 */background-color: green; } 3.选择每个循环(循环周期为 a)中第 b 个元素时,则使用公式 an+b: /* 选择位置为 3 ...
nth-of-type选择器主要用于选取特定类型的子元素，且该子元素在同级同类元素中的位置符合指定的规律。例...
:nth-of-type(2)会选择Paragraph 2,因为它是父元素的第二个元素。 选择所有奇数子元素: :nth-child(odd)会选择Paragraph 1、Paragraph 2和Paragraph 3,因为它们分别是第一个、第三个和第五个子元素。 :nth-of-type(odd)会选择Paragraph 1和Paragraph 3,因为它们分别是第一个和第三个元素。 选择所有偶数子...
首先肯定是p标签里的背景变红,通俗一点理解p:nth-of-type(3)代表的就是,所有兄弟节点中找标签为p的,然后找到的第三个p标签背景为红色 所以,three背景为红咯 注意:不要和:nth-child(n)搞混了,上面的背景变黄的是two,因为,该选择器是找父元素的第三个子元素,如果该子元素为p,则其变为黄色,如果,第三个...
nth-child的关键词是child,它关心的是所有子元素。它会对所有子元素生效。ele:nth-child的意义就是选择父元素下的第n个子元素,如果他是ele类型的,那么对他生效,如果他不是ele类型的,则不生效。 简而言之,nth-child影响到了所有child子元素,而nth-of-type则影响到了相应type的子元素。
在CSS3中,可以使用:nth-of-type选择器和:before选择器来实现一些特定的样式效果。 :nth-of-type选择器用于选择同一父元素下的特定类型的元素。它的语法是::nth-of-type(n),其中n表示一个整数,表示要选择的元素在同类型元素中的位置。 例如,如果要选择一个父元素下的第二个段落元素,可以使用...
CSS3 :nth-of-type() Selector 完整CSS选择器参考手册 实例 指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色: p:nth-of-type(2) { background:#ff0000; } 尝试一下 » 定义和用法 :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
上面这个例子,.demo li:nth-child(2)选择的是one节点,而.demo li:nth-of-type(2)则选择的是two节点。 .demo li:nth-child(2)的选择过程分析: :nth-child(2)以选择数字优先,它先找到了父类 .demo ,然后再查找父类.demo的第二个子元素,先判断这个子元素是否为li,如果是则选择,非则选择失败。 .demo...
选择器 :nth-of-type() 4.0 9.0 3.5 3.2 9.6定义和用法 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。提示:请参阅 :nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。-...
nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。 nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素...