:nth-child是一个非常牛逼的伪类,如果你能很好的理解它就可以用CSS 做出很多非常实用的效果。当我很年轻的时候还使用PHP的i++来实现一些东西,其实CSS 完全可以实现。下面是我总结的一些用法,用了可爱的糖糖做演示,彩色头像就代表选中,T,T。

仅选择第5个

li:nth-child(5) {
...
}

如果选择第一个元素的话你可以使用:first-child或者用上面的方法。

除了前五个全部选择

li:nth-child(n+6) {
...
}

只选择前5个

li:nth-child(-n+5) {
...
}

从第一个开始,每隔4个选择一个

li:nth-child(4n-7) {  /* or 4n+1 */
...
}

选择奇数或者偶数

li:nth-child(odd) {
...
}

li:nth-child(even) {
...
}

选择最后一个

li:last-child {
...
}

选择倒数第二个

-EOF-

cSS3 伪类:nth-child 的使用方法的更多相关文章

  1. CSS3伪类nth-child结合transiton动画实现文字若影若现

    css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...

  2. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  3. jQuery实现隔行变色、悬停变色 ( CSS3伪类选择器:nth-child() )

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  4. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  5. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  6. 利用CSS3伪类做3D按钮

    这是通过css3伪类实现的3d按钮,html代码为: <div id="container_buttons"> <p><a class="a ...

  7. CSS3伪类使用方法实例

    有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了. 下面有一段实例大家可以参考一下: <!DOCTYPE html> < ...

  8. CSS3伪类与伪元素的区别及注意事项

    CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...

  9. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

随机推荐

  1. vs2010 调试快捷键

    vs2010 调试快捷键   命令名 快捷键 说明 调试.应用代码更改 Alt + F10 启动生成操作,利用它可以通过“编辑并继续”功能应用对正在调试的代码所作的更改. 调试.自动窗口 Ctrl + ...

  2. 面向侧面的程序设计AOP-------《二》本质

    本文转载自张逸:晴窗笔记 AOP技术本质 2.2.1 技术概览 AOP(Aspect-Oriented Programming,面向方面编程),可以说是OOP(Object-Oriented Prog ...

  3. OAuth

    http://oauth.net http://oauth.net/2/ http://tools.ietf.org/html/rfc6749 人人网:http://wiki.dev.renren.c ...

  4. jQuery基础 - 改变CSS样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  5. linux防止sshd被爆破(安装denyhosts)

    这是一篇收集在日志里的文档,当初查看服务器sshd日志发现很多不明IP尝试登陆,因此想用什么办法阻止这样的事情发生.网上找了下用denyhosts可以解决这样的问题,因而也就将其收集在日志里了.由于时 ...

  6. iOS 中关于ViewController总结

    以前写程序时,经常被旋转问题弄的头疼,今天为了解决这个问题,偶然看到了苹果官方文档 View Controller Programming Guide for iOS. 这才发现这个必读的资料!以前许 ...

  7. Delphi经验总结(1)

    先人的DELPHI基础开发技巧 ◇[DELPHI]网络邻居复制文件 uses shellapi; copyfile(pchar('newfile.txt'),pchar('//computername ...

  8. 项目总结(二)--- CocoaPods的简单介绍与使用

    先谈下,我们为什么要使用CocoaPods,它能为我们做什么吧. 所有开发过iOS应用的小伙伴们都知道,在整个项目中,第三方库的引用必不可少(特别感谢那些优秀第三方开源库的作者,给我们提供了多大的便捷 ...

  9. win8系统使用Administrator用户 命令行

    windows键+X,再按A键进入管理员模式的命令提示符 输入命令:net user administrator /active:yes 然后注销,即可使用管理员账户登录

  10. glut编译问题 (程序无法运行)

    参考:http://blog.csdn.net/robinjwong/article/details/5636049 error: the procedure entry point _glutini ...