nth-child()选择器小结
之前也用到过nth-child,只是当时理解的不够透彻。今天回过头去看这个知识点时,发现了一个易错点。
浏览器支持情况:
所有主流浏览器都支持nth-child()选择器,除了IE8及更早的版本。
下面还是简单说一下它的用法吧:
nth-child(n):该选择器匹配属于父元素的第n个子元素,不论元素的类型。其中n可以是数字、关键词或公式。
关于数字就不多说了。下面先说说关键词:如nth-child(odd)或nth-child(even)。
odd或even可用于匹配下标是奇数或偶数的子元素的关键词(注意:第一个子元素下标是1)
关于公式的用法:nth-child(an+b)。a表示周期的长度,b表示偏移值(从0开始)。如nth-child(3n+1)表示每3个为一个周期,选择每个周期里的第2个元素。
重点来了:
如h2:nth-child(odd),首先nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素的所有子元素一起计算的。
换句话说:h2:nth-child(odd),其含义并不是选择第奇数个h2来使用,而是指当第奇数个元素是h2则选中。
作者:江峰★
出处:http://www.cnblogs.com/jf-67/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利