CSS3:nth-child()伪类选择器
发布时间：2018-09-09 12:57:46 所属栏目：创业 来源：站长网
导读：CSS3的强盛，让人赞叹，人们在惊喜之余，又不得不为其艰巨的阶梯感想痛惜：好的尺度只有获得行业赏识器的精采支持才算得上尺度。CSS3标 准已提出数年，可是今朝能实现她的赏识器并不多，固然部门赏识器能实现部门类型，但这又有什么用呢？面临更多的兼容性
|
CSS3的强盛，让人赞叹，人们在惊喜之余，又不得不为其艰巨的阶梯感想痛惜：好的尺度只有获得行业赏识器的精采支持才算得上“尺度”。CSS3标 准已提出数年，可是今朝能实现她的赏识器并不多，固然部门赏识器能实现部门类型，但这又有什么用呢？面临更多的兼容性题目，CSSer们只有望洋轻叹。虽 然云云，但有前瞻性的我们，又怎能留步不前呢？本日我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b)为什么选择她，由于我以为，这个选择器是最多学问的一个了。很痛惜，据我所测，今朝能较好地支持她的只有Opera9+和Safari3+。 描写： 伪类:nth-child()的参数是an+b，假如凭证w3.org上的描写，写成中文，很也许会让人头晕，再加上笔者的文笔程度有限，以是我抉择避开an+b的说法，把它拆分成5种写法共5部门来声名。 第一种：简朴数字序号写法 :nth-child(number) 直接匹配第number个元素。参数number必需为大于0的整数。 例子： li:nth-child(3){background:orange;}/*把第3个LI的配景设为橙色*/第二种：倍数写法 :nth-child(an) 匹配全部倍数为a的元素。个中参数an中的字母n不行缺省，它是倍数写法的符号，如3n、5n。 例子： li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、全部3的倍数的LI的配景设为橙色*/ 第三种：倍数分组匹配 :nth-child(an+b) 与 :nth-child(an-b) 先对元素举办分组，每组有a个，b为组内成员的序号，个中字母n和加号+不行缺省，位置不行变更，这是该写法的符号，个中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（着实an前面也可所以负号，但留给下一部门讲。） 例子： li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/ li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/ li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/ li:nth-child(3n±0){background:orange;}/*相等于(3n)*/ li:nth-child(±0n+3){background:orange;}/*相等于(3)*/ 第四种：反向倍数分组匹配 :nth-child(-an+b) 此处一负一正，均不行缺省，不然有时义。这时与:nth-child(an+1)相似，都是匹配第1个，但差异的是它是倒着算的，从第b个开始往回算，以是它所匹配的最多也不会高出b个。 例子： li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/ li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包罗第8个）LI，这个较为适用点，用来限制前面N个匹配常会用到*/ 第五种：奇偶匹配 :nth-child(odd) 与 :nth-child(even) 别离匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)功效一样；偶数(even)与(2n+0)及(2n)功效一样。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
