2.后两组 表明 nth-child是任何儿子辈分都计数1 :nth-of-typ是 结构伪类选择器前的 选择器选中的那种 计数1 【注意 一定是整体可以被匹配到才计数】 .f_row3 p:nth-child(1) { background-color: pink; }错误原因: 根本不在这样的dom结构 .f_row4 p:nth-of-type(1) { background-color: #00597...
1、先看效果图 上图中比较麻烦的是每块的底色处理,下面看怎么处理👇 2、:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 数字:最常见的使用方式,eg: :nth-child(1) 关键词: Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一...
nth-child 公式的一般形式为:nth-child(an+b),其中a和b为整数。这个公式的意思是选择父元素的第n个子元素,其中n是从0开始计数的。 例如,nth-child(2)选择父元素的第二个子元素,nth-child(3)选择父元素的第三个子元素,以此类推。 在这个公式中,a和b可以是任意整数,它们决定了选择的具体位置。如果a为0,...
一、选择列表中的偶数标签:nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的,直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 五、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) :nth-last-chil...
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n 可以是一个数字,一个关键字,或者一个公式。提示: 请参阅选择器。该选择器匹配同类型中的第 n 个同级兄弟元素。 语法element:nth-child(n)element 是你想要选择的 HTML 元素。 n 是一个参数,可以是关键字(如 odd 或even),或者...
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n 可以是一个数字,一个关键字,或者一个公式。提示: 请参阅选择器。该选择器匹配同类型中的第 n 个同级兄弟元素。 语法element:nth-child(n)element 是你想要选择的 HTML 元素。 n 是一个参数,可以是关键字(如 odd 或even),或者...
:first-child :first-letter :first-line :hover :last-child :link :nth-child :nth-last-child :only-child :visited child (>) descendant CSS:nth-child selector This CSS tutorial explains how to use the CSS selector called:nth-childwith syntax and examples. ...
可以简单理解为等同于 p:nth-child(odd) p:nth-child(2n+0) 可以简单理解为等同于 p:nth-child(even) p:nth-child(n+2) 表示正向范围,从第2个p元素开始(包括第2个p元素)到最后一个p元素都添加背景色(这里范围指2-5) p:nth-child(-n+5) ...
nth-child(n):选择所有子元素,n从 1 开始计数。 nth-child(odd):选择所有奇数位置的子元素。 nth-child(even):选择所有偶数位置的子元素。 nth-child(an+b):选择从第b个开始,每隔a-1个元素选择一个。 应用场景 斑马条纹效果:通过给奇数行和偶数行设置不同的背景色,实现表格或列表的斑马条纹效果。
CSS选择器:nthchild的用法如下：基本用法：:nthchild：选取父元素的第N个子元素，不考虑子元素的类型。例如，:nthchild选取第一个子元素，:nthchild选取第二个子元素，以此类推。选择前几个子元素：:nthchild：选择父元素的前三个子元素。但更常见的是使用具体的数字来指定前几个。选择偶数或奇数子...