|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
破洛洛文章简介:当我想要完善的利用:nth-child大概:nth-of-type的时分有点儿头晕。你越了解它们,就可以写出越好的CSS划定规矩!
译自:Useful:nth-childRecipies
中文:有效的:nth-child秘方
请尊敬版权,转载请说明来历,多谢!
当我想要完善的利用:nth-child大概:nth-of-type的时分有点儿头晕。你越了解它们,就可以写出越好的CSS划定规矩!
在这些复杂的”秘方”(实践上是表达式)中我将反复的利用一个复杂的列表并随即选择数字。可是很分明很简单改动它们以取得相似的选择器。
只选择第五个元素
- li:nth-child(5){color:green;}
复制代码 要选择第一个元素,你可使用:first-child,大概我信任你也能够改下下面的例子来完成。
选择除后面的五个以外的一切元素
- li:nth-child(n+6){color:green;}
复制代码 假如有凌驾10个元素,它将会选中凌驾5个。
只选择后面的5个
- li:nth-child(-n+5){color:green;}
复制代码 从入手下手的谁人,选择每第四个
- li:nth-child(4n-7){/*or4n+1*/color:green;}
复制代码 选择奇数大概偶数
- li:nth-child(odd){color:green;}
复制代码
- li:nth-child(5){color:green;}0
复制代码 固然这里也有别的两种完成,你懂的——神飞
选择最初一个元素
- li:nth-child(5){color:green;}2
复制代码 选择倒数第二个
- li:nth-child(5){color:green;}4
复制代码 从这个例子可看出,下面谁人例子也有第二种完成办法。
扫瞄器撑持
风趣的是,:first-child和:last-child被IE7撑持,可是晓得IE9才撑持剩下的选择器。假如你忧虑IE,可使用Selectivizr。假如你扫瞄器兼容性对你很主要,请存眷WhencanIuse…
嗯,利用CSS3选择器是件很风趣的事变,像做复杂的数学题一样。
</p>
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。 |
|