码云 利用CSS3 nth-child()选择器 实现表格奇偶行变色
nth-child()简介
CSS3 的 nth-child() 选择器，我之前很少用，在做表格偶数行变色的时候，我通常在绑定的时候，做一个 js 判断，来加一个 css，从而使表格偶数行和奇数行颜色不一样。这样的兼容性很好。但是最近在做手机网站的时候，由于手机网站对浏览器兼容要求相对较低，手机浏览器大部分都支持 css3，这就大大提高了开发效率。可以随意使用 CSS3 :nth-child()伪类选择器。
nth-child()浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
由上图可以看出，IE9 及以上版本，火狐，谷歌，Safari ，Opera 都支持！
定义和用法
:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
例如：
p:nth-child(2)
{
background:#ff0000;
}
<body>
<h1>这是标题</h1>
<p>码云笔记第一个段落。</p>
<p>码云笔记第二个段落。</p>
<p>码云笔记第三个段落。</p>
<p>码云笔记第四个段落。</p>
</body>
解释：:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，不论元素的类型。p:nth-child(2),P 标签的父元素是 body，body 的第二个子元素是“码云笔记第一个段落。”所以码云笔记第一个段落颜色变为了红色！！！
需注意
很多小伙伴经常把:nth-child() 和:nth-of-type()混淆。
CSS3 :nth-of-type() 选择器的意思是“规定属于其父元素的第二个 p 元素”
看下面的例子：
p:nth-of-type(2)
{
background:#ff0000;
}
<body>
<h1>这是标题</h1>
<p>码云笔记第一个段落。</p>
<p>码云笔记第二个段落。</p>
<p>码云笔记第三个段落。</p>
<p>码云笔记第四个段落。</p>
</body>
代码一样，我的样式仅仅是把 p:nth-child(2)改成了 p:nth-of-type(2)，现在就是“码云笔记第二个段落。”颜色变成了红色。
奇偶数匹配
现在开始说说我开通说的 table 的 tr 偶数行变色的问题了。
因为 table 的子元素一般是 tr，不会有别的，所以可以用
tr:nth-child(odd) 与 tr:nth-child(even)
当然也可以用
tr:nth-of-type(odd) tr:nth-of-type(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
倍数写法
:nth-child(an)【:nth-of-type(an)同理，不解释】
匹配所有倍数为 a 的元素。其中参数 an 中的字母 n 不可缺省，它是倍数写法的标志，如 3n、5n。
例子：
li:nth-child(3n){background:orange;}/*把第 3、第 6、第 9、…、所有 3 的倍数的 LI 的背景设为橙色*
延伸
:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，还可以 :nth-child(-an+b)也就是反向匹配。
总之，你可以用了:nth-child 伪类，可以对多个标签有规律的进行不同的显示，显示出 CSS3 的强大。
结语
以上就是几天为大家带来的关于 CSS3 nth-child()选择器 实现表格奇偶行变色的全部知识。css3 需要多用，熟能生巧，在书写的时候，经常会把一些 css3 的属性忘掉，你可以多手写几遍。关于 css 选择器，后续在为大家整理一篇相关文章，敬请期待吧。
以上关于利用CSS3 nth-child()选择器 实现表格奇偶行变色的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 利用CSS3 nth-child()选择器 实现表格奇偶行变色
