p:nth-of-type(2) {/* 设置样式 */background-color: green; } 2.选择所有奇数位置的 元素时,使用关键词 odd: p:nth-of-type(odd) {/* 设置样式 */background-color: green; } 3.选择每个循环(循环周期为 a)中第 b 个元素时,则使用公式 an+b: /* 选择位置为 3 的倍数的所有 元素 */p...
在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,则其变为黄色,如果,第三个...
nth-of-type和nth-child都是css3中的伪类选择器,其功能也都是选取父元素下的直接子元素,那么他们的区别在哪里呢? 其实他们的区别就在type和child上。 nth-of-type的关键词是type,即他关心的是类型。它不会对所有子元素生效,只会对子元素中符合选择器要求的类型的子元素进行筛选,而忽略非选择器要求的类型的子...
首先上概念 :nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。看概念,...
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)与:nth-of-type(n) :nth-child(n) 是选择父元素的第n个子元素。 :nth-of-type(n) 是选择父元素的第n个同类型的子元素.readp:nth-child(2)选择的是父元素.read第2个子元素,且是p元素。(先找第2个,再找是不是p) .readp:nth-of-type(2) 则是选择父元素.read第2个为p的子元素...
首先:nth-child 和 nth-of-type的索引都是从1开始的 nth-child 和 nth-of-type有什么不同? 直接上例子,看代码注释就好 <!DOCTYPE html> demo /*ul下的第2个元素 且这个元素为li*/ .ul li:nth-child(2) { color: red; } /*ul下的第2个li*/ .ul li:nth-of-...
在实际开发中,nth-child通常用于实现排序、筛选等功能,其中元素的顺序非常重要;而nth-of-type则更常用于多样化展示格式,特别是在内容呈现时,经常需要对列表或表格中的特定项施加样式。比如在产品展示、信息组织等领域,能够使用这些选择器增强交互性与视觉吸引力。我们的展示不仅仅是为了吸引用户,更是通过精美的样式和结...