仓酷云

标题: CSS教程之写出好的CSS划定规矩:完善的利用:nth-child [打印本页]

作者: 若相依 时间: 2015-1-15 23:15
标题: CSS教程之写出好的CSS划定规矩:完善的利用:nth-child
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
破洛洛文章简介：当我想要完善的利用: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;}

复制代码

从入手下手的谁人，选择每第四个

1234

复制代码

li:nth-child(4n-7){/*or4n+1*/color:green;}

复制代码

选择奇数大概偶数

[attach]292043[/attach]

复制代码

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。

作者: 小女巫 时间: 2015-1-17 20:54
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 小妖女 时间: 2015-1-26 19:09
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 再现理想 时间: 2015-2-4 21:19
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 爱飞 时间: 2015-2-10 15:24
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 乐观 时间: 2015-3-1 13:57
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 灵魂腐蚀 时间: 2015-3-10 20:00
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 小魔女 时间: 2015-3-17 11:06
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 谁可相欹 时间: 2015-3-24 08:44
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

欢迎光临仓酷云 (http://ckuyun.com/)