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 ...
随机推荐
- Coursera台大机器学习课程笔记11 -- Nonlinear Transformation
这一节讲的是如何将线性不可分的情况转为非线性可分以及转换的代价.特征转换是机器学习的重点. 最后得出重要的结论是,在做转换时,先从简单模型,再到复杂模型. 参考:http://www.cnblogs. ...
- javascript memoization递归优化
memoize优化递归 function createRec(callback, cache) { cache = cache || []; var rec = function(n) { (n in ...
- C#模拟POST登录cnblogs并发布文章
用到的工具FireFox的Firebugs插件 打开网络功能进行抓包 数据如下 可以得知POST的数据为: __EVENTTARGET=&__EVENTARGUMENT=&__VIEW ...
- JQuery $.ajax()方法详解
jQuery Ajax 参考手册 实例 通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01").cli ...
- git无法clone远程代码库及git代理设置
git作为一个版本管理神器,日常工作中自然也就少不了了:特别是Android开发,github和google是逃不过的了.然而很多时候需要用到git克隆远程的代码库,众所周知的原因google.and ...
- java关闭流,解压缩后的清除
关闭流文件和file文件的时候,先打开的后关闭,后打开的先关闭,实在不行调用system.jc()方法
- block引发的陷阱
block在项目的开发中使用时非常频繁的,苹果官方也极力推荐使用block.其实,究其本质,block就是指向结构体的指针(可利用运行时机制查看底层生成的c代码).然而在使用block时会存在很多陷阱 ...
- 删除自带OpenJDK
1:rpm -qa|grep jdk 查看当前的jdk情况. 2:yum -y remove java java-1.7.0-openjdk* 卸载openjdk,这个过程中因为依赖原因可能会卸载一些 ...
- 字串变换(codevs 1099)
题目描述 Description 已知有两个字串 A$, B$ 及一组字串变换的规则(至多6个规则): A1$ -> B1$ A2$ -> B2$ 规则的含义为:在 A$中的子串 A1$ ...
- Linux命令自己总结
对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要,下面 ...