这两个都是css3选择器,odd是奇数行,even是偶数行。 ul li:nth-child(odd){ background-color: lightgreen; } 以上样式表示奇数行的li背景色为浅绿色。
nth-child(odd):奇数 nth-child(even):偶数 使用时,如果是精确到数字时,切记是从同一级别的元素开始计算,而不是指定某个类才开始计算。 比如: 如果我要选择class为test的,nth-child(2),第2个。 详细解释,参考:
51CTO博客已为您找到关于css nth-child(even的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及css nth-child(even问答内容。更多css nth-child(even相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。
nth-child(odd):奇数 nth-child(even):偶数 使用时,如果是精确到数字时,切记是从同一级别的元素开始计算,而不是指定某个类才开始计算。 比如: 如果我要选择class为test的,nth-child(2),第2个。 详细解释,参考: http://niutuku.com/tech/css/249737.shtml...
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。提示:请参阅 :nth-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素。更多实例 实例1 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。在...
语法::nth-child(n) 说明::nth-child() 是CSS3的一个伪类选择器,匹配父元素中的第 n 个子元素,元素类型没有限制。 n可以是一个数字,一个关键字,或者一个公式。 下面用案例来说明各个常见的情况用法 原始效果demo <liv-for="item in listData">{{item.pname}}{{item.type}}{{item.LJTZJH}}{{item...
li:nth-child(odd) { background:#ff0000; } li:nth-child(even) { background:#0000ff; } 3、倍数 li:nth-child(2n) { background: #ff0000; border-bottom: 1px; } ... 4、公式:隔选择子元素,选择1,4,7,10 li:nth-child(3n+1) { back...
:nth-child(odd) :nth-child(even) 隔选择子元素 :nth-child(3n+1), 选择1,4,7,10 范围高级用法 nth-child(n+2):nth-child(odd):nth-child(-n+9) 使用nth-child(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第9位,并且只包含奇数位。
可以简单理解为等同于 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) ...
在网页设计中,表格真的很有用,因为能用一眼看出所有内容。但是,如果学会了CSS的:nth-child(even),那你就太棒了!只要轻轻一划,odd行和even行就能大变身!比如,我常会把even行的背景色调浅些,让表格看起来更美观,每个字也更加清晰,从而提升了表格的可读性!