CSS3的nth-child() 选择器，表格奇偶行变色 · CSS学习宝典

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>haorooms第一个段落。</p> <p>haorooms第二个段落。</p> <p>haorooms第三个段落。</p> <p>haorooms第四个段落。</p> </body> 上面这段代码请问那个段落颜色是红色的？答案是“haorooms第一个段落。”颜色变成了红色！解释：:nth-child(n) 选择器匹配属于其父元素的第 n个子元素，不论元素的类型。p:nth-child(2),P标签的父元素是body，body的第二个子元素是“haorooms第一个段落。”所以haorooms第一个段落颜色变为了红色！！！注意很多朋友经常把:nth-child() 和:nth-of-type()混淆。 CSS3 :nth-of-type() 选择器的意思是“规定属于其父元素的第二个 p 元素” 看下面的例子： p:nth-of-type(2) { background:#ff0000; } <body> <h1>这是标题</h1> <p>haorooms第一个段落。</p> <p>haorooms第二个段落。</p> <p>haorooms第三个段落。</p> <p>haorooms第四个段落。</p> </body> 代码一样，我的样式仅仅是把 p:nth-child(2)改成了 p:nth-of-type(2)，现在就是“haorooms第二个段落。”颜色变成了红色。奇偶数匹配现在开始说说我开通说的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需要多用，熟能生巧，在书写的时候，经常会把一些css3的属性忘掉，你可以多手写几遍。关于css选择器，也可以看http://www.haorooms.com/tools/css_selecter/