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 ...
随机推荐
- 解决Centos关闭You have new mail in /var/spool/mail/root提示
昨天搬到阿里云了. 装的系统是Centos 6.3的加固版 今天查看内存的时候 出现一天奇怪的提示 You have new mail in /var/spool/mail/root 有的时候每敲一下 ...
- 如何解决Eclipse启动时画面一闪而过
以前Eclipse都可以正常使用,突然有一天不能启动了,点击图标后启动画面一闪之后就消失了,以下是一些解决方案 1. 找到Eclipse目录下的eclipse.exe,右键点击->发送到桌面快捷 ...
- iptables 命令介绍
http://www.cnblogs.com/wangkangluo1/archive/2012/04/19/2457072.html iptables 防火墙可以用于创建过滤(filter)与NAT ...
- RPM软件包管理的查询功能
以后大家升级rpm包的时候,不要用Uvh了! 我推荐用Fvh 前者会把没有安装过得包也给装上,后者只会更新已经安装的包 总结:未安装的加上小写p,已安装的不需要加p 查询q rpm {- ...
- 集群ssh服务和免密码登录的配置
安装Hadoop之前,由于集群中大量主机进行分布式计算需要相互进行数据通信,服务器之间的连接需要通过ssh来进行,所以要安装ssh服务,默认情况下通过ssh登录服务器需要输入用户名和密码进行连接,如果 ...
- 8.python笔记之面向对象基础
title: 8.Python笔记之面向对象基础 date: 2016-02-21 15:10:35 tags: Python categories: Python --- 面向对象思维导图 (来自1 ...
- DP:Cow Bowling(POJ 3176)
北大教你怎么打保龄球 题目很简单的,我就不翻译了,简单来说就是储存每一行的总数,类似于状态压缩 #include <stdio.h> #include <stdlib.h> # ...
- Cocos2d-JS场景树
场景树概念(Scene Graph) 场景树是Cocos2d-JS中用来管理场景中所有元素的一个数据结构,场景树之所以被称为一棵树是因为它将一个场景的所有子结点以树状图的形式组织在一起. Cocos2 ...
- Redhat修改主机名_Red hat怎么永久修改主机名hostname(转)
有几种方式修改Redhat的主机名字,这些方法也适合其他的Centos系统,下面介绍Red hat怎么永久修改主机名hostname的三种方法. 方法一: 说明"hostname" ...
- SQL 总汇
/* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...