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 ...
在CSS3中,可以使用:nth-of-type选择器和:before选择器来实现一些特定的样式效果。 :nth-of-type选择器用于选择同一父元素下的特定类型的元素。它的语法是::nth-of-type(n),其中n表示一个整数,表示要选择的元素在同类型元素中的位置。 例如,如果要选择一个父元素下的第二个段落元素,可以使用...
而 :nth-type-of(2) 选中了两个元素,分别是父级.demo中的第二个p标签和第二个li标签,由此可见,不指定标签类型时,:nth-type-of(2)会选中所有类型标签的第二个。 我们已经了解了nth-child和 nth-of-type的基本使用与区别,那么更进一步nth-of-type(n)与nth-child(n)中的n是什么呢? nth-of-type(n)与...
首先肯定是p标签里的背景变红,通俗一点理解p:nth-of-type(3)代表的就是,所有兄弟节点中找标签为p的,然后找到的第三个p标签背景为红色 所以,three背景为红咯 注意:不要和:nth-child(n)搞混了,上面的背景变黄的是two,因为,该选择器是找父元素的第三个子元素,如果该子元素为p,则其变为黄色,如果,第三个...
CSS3中的nth-of-type伪元素选择前几个或后几个。nth使用时应该注意几点。(n)中的n如果有运算,n必须放在前面,n从0开始递增,()内运算结果大于元素个数,运算自动停止。 选择1~9如下: li:nth-of-type(-n+9) {background:red} 选择9~最后如下: li:nth-of-type(n+9) {background:red} 选择倒数2个如下...
首先上概念 :nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。看概念,...
nth-child()与nth-of-type()区别 首先需要注意的是,css中根本没有nth-of-child()的写法,本人有时会写成这种形式,导致效果出不来。 其次,不管是nth-child(n),还是nth-of-type(n),两者()中的n都是从数字1开始计算的,切记! 下面说说区别:nth在英文中是 ‘第几’的意思,nth-child就是父元素的第几个孩子...
其实他们的区别就在type和child上。 nth-of-type的关键词是type,即他关心的是类型。它不会对所有子元素生效,只会对子元素中符合选择器要求的类型的子元素进行筛选,而忽略非选择器要求的类型的子元素。ele:nth-of-type(n)的意义就是选择父元素下的第n个ele类型的子元素。
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是指父元...
在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。 通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。 HTML代码: