主要用的::nth-of-type或者:nth-child。 方式一:nth-child div:nth-child(odd){ }//奇数行 div:nth-child(even){ }//偶数行 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 方式二:nth-of-type div:nth-of-type(odd){//奇数行}div:nth...
方式一:nth-child /*奇数行*/div:nth-child(odd){ }/*偶数行*/div:nth-child(even){ } :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 方式二:nth-of-type /*奇数行*/div:nth-of-type(odd){ }/*偶数行*/div:nth-of-type(even){ } nth-of-type(n) : 匹配同...
其实.line:nth-of-type(2n+1) 是按照元素类型做个集合, 然后再根据不同的集合取符合奇数规则的显示。 这就解释了为何 p 和 div 都有显示。 而非揉在一起间隔显示。 tips: 注意 nth-of-type 的描述,相同兄弟节点的元素 .hello:nth-of-type(2n+1) 为了证明上例的猜想, 用了 .hello 选择器做区分, 确...
nth-of-type选择器主要用于选取特定类型的子元素，且该子元素在同级同类元素中的位置符合指定的规律。例...
:nth-last-child(n) 选中同级别中倒数第n个标签 第二，nth-of-type使用方法 nth-of-type（参数...
碰到了个选择器,:nth-of-type <!DOCTYPE html> p:nth-of-type(odd)//奇数 { background:#cff; } p:nth-of-type(even)//偶数 { background:#fcc; } 这是标题 第一个段落。 这是一个div。 这是一个div。 第二个段落。 第三个段落。 这是一个span。 第四个段落。 第五个段落。
CSS3 :nth-of-type() Selector 完整CSS选择器参考手册 实例 指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色: p:nth-of-type(2) { background:#ff0000; } 尝试一下 » 定义和用法 :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
:nth-of-type(n):n可以是一个数字,一个关键字,或者一个公式。 数字,我就不多说了,注意是从1开始的哦(不是从0) 关键字:可选的有:odd(奇数)、even(偶数) #wrap p:nth-of-type(even) { background: red; } 1. 2. 3. 此时,背景变为红色的就是two、four、six啦 ...
前端项目开发中,需要根据行数的奇数和偶数的不同,设置不同的颜色显示,以在视觉上给用户以良好的浏览体验,这里就需要使用css奇数偶数选择器。 主要用的::nth-of-type或者:nth-child。 方式一:nth-child div:nth-child(odd){ } //奇数行 div:nth-child(even){ ...
在css中,可以使用:nth-of-type()选择器分别选中偶数行和奇数行元素,并添加不同的样式。 :nth-of-type(n) 选择器选取属于其父元素的特定类型的第 n 个子元素的所有元素。 当配合关键字even和odd使用,可选择偶数行和奇数行 even 选取每个偶数子元素。