cSS3 伪类:nth-child 的使用方法
: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 的使用方法的更多相关文章
- CSS3伪类nth-child结合transiton动画实现文字若影若现
css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...
- CSS3 伪类选择器 nth-child() 的用法
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...
- jQuery实现隔行变色、悬停变色 ( CSS3伪类选择器:nth-child() )
<title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...
- CSS3伪类和伪元素
作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- 利用CSS3伪类做3D按钮
这是通过css3伪类实现的3d按钮,html代码为: <div id="container_buttons"> <p><a class="a ...
- CSS3伪类使用方法实例
有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了. 下面有一段实例大家可以参考一下: <!DOCTYPE html> < ...
- CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...
- 巧用CSS3伪类选择器自定义checkbox和radio的样式
由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...
随机推荐
- linux 文件权限除了r、w、x外还有s、t、i、a权限:
s:文件属主和组设置SUID和GUID,文件在被设置了s权限后将以root身份执行.在设置s权限时文件属主.属组必须先设置相应的x权限,否 则s权限并不能正真生效(c h m o d命令不进行必要的完 ...
- glut64位操作系统安装
64位win7下OpenGL的配置 - walkandthink的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/walkandthink/article/detai ...
- Android中多个调用Activity的问题
<application android:allowBackup="true" android:icon="@drawable/ic_launcher" ...
- HDOJ 3790
dijstra最短路径算法 : 9885560 2013-12-23 23:54:56 Accepted 3790 203MS 8112K 1343 B C++ 泽泽 #include<cstd ...
- PHP 遍历数组的方法汇总
1. foreach() foreach()是一个用来遍历数组中数据的最简单有效的方法. #example1: <?php $colors= array('red','blue','green' ...
- Java基础算法集50题
最近因为要准备实习,还有一个蓝桥杯的编程比赛,所以准备加强一下算法这块,然后百度了一下java基础算法,看到的都是那50套题,那就花了差不多三个晚自习的时间吧,大体看了一遍,做了其中的27道题,有一些 ...
- 如何提高cocos2d-x-spine骨骼动画加载速度
下面分2点来说: 1. 时间消耗点:io和现场解析 解决方案:加载过的骨骼动画就不要每次重新加载,不要每次都去加载json文件和atlas,我推荐使用 static CCSkeletonAnimati ...
- Android之Fragment(一)
Fragment的产生与介绍 Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后拷贝一份,修改布局以适应平板 ...
- 一、HTML和CSS基础--HTML+CSS基础课程--第1部分
第一章 HTML介绍 Html和CSS的关系 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比 ...
- an error occurred during the file system check错误的解决
[root@GIT ~]# fsck -A /dev/mapper/VolGroup-lv_root 下面的选择,一路Y就行了,最后reboot,问题解决!