css奇数偶数选择器

前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。

主要用的：: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-of-type(even){//偶数行
}

nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。

区别：nth-child () 与 nth-of-type()

nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd) 奇数 ,nth-child(even) 偶数。

nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。

相同之处是，两者都是找到元素之后再与前面的选择符进行匹配，这里的匹配方式是一样的。

稍微往下延伸，清楚了查找方式，那么不管前面的选择符怎么变，最后都是先查找到元素再与前面的选择符进行匹配。

也就是说选择符与他们的查找方式没有关系。

延伸：选中最后一个奇数和偶数

这里以nth-child为例：

// 选中最后一个奇数
div:nth-child(odd):last-child {margin-bottom: 0;
}
// 选中最后一个偶数
div:nth-child(even):last-child {margin-bottom: 0;
}

本文完~

学习更多技能

请点击下方公众号

css奇数偶数选择器相关推荐

css奇数偶数选择器_css高级选择器和基本选择器
黑马程序员成都java基础班 32期 2019.10.15开班黑马程序员成都python基础班 3期 2019.10.24开班黑马程序员成都前端基础班 4期 2019.8.23开班黑马程序员成都 ...
html css 奇数偶数,网页设计中为啥少用奇数字体？_html/css_WEB-ITnose
一.UI设计师的原因多数设计师用的设计软件(如:ps)大多数都是偶数,所以前端工程师一般都是用偶数字体二.浏览器的原因其一是为了迁就ie6,万恶的ie6会把定义为13px的字渲染成14px,你可 ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
html奇偶选择器,css奇偶后代选择器
[前言] 遇到分类栏左右两侧不同样式需求,之前用的php判断.现在介绍个更为简单的方法,css后代选择器,除此外还可以通过jquery添加类名来实现 [主体] (1)css后代选择器 ①奇数选择器: ...
CSS第三级选择器 Selectors Level 3 文档翻译
Selectors Level 3 CSS第三级选择器译者目前在做前端,博客内容主要是文档翻译.如果读者希望我翻译某些和前端相关的文档,欢迎留言告诉我.对于已有在网络上能够搜到质量较高译文的文章,我 ...
CSS 伪类选择器详解：为网页添加交互与美感
介绍 CSS 伪类选择器是一种非常有用的 CSS 选择器,它能够根据元素的状态.位置或其他属性来选择元素并应用样式.伪类选择器的语法为 :pseudo-class,其中 pseudo-class 是一 ...
CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求. ul li:nth-child(3n+3) { colo ...
css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）
css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...
CSS样式----标记选择器
一,概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页信息内容分离的一种标记性语言. 二,标记选择器 <style> ...