有用的:nth-child秘方
作者：vocal 来源：前端观察 发布时间：2011-07-01 12:56:11
标签：nth-child,li
当我想要完美的使用: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;
}
从开始的那个，选择每第四个
li:nth-child(4n-7) {
/* or 4n+1 */
color: green;
}
选择奇数或者偶数
li:nth-child(odd){
color: green;
}
li:nth-child(even){
color: green;
}
当然这里也有另外两种实现，你懂的——神飞
选择最后一个元素
li:last-child {
color: green;
}
选择倒数第二个
li:nth-last-child(2){
color: green;
}
从这个例子可看出，上面那个例子也有第二种实现方法。
浏览器支持
有趣的是，:first-child 和:last-child被IE 7支持，但是知道IE9才支持剩下的选择器。如果你担心IE，可以使用Selectivizr。如果你浏览器兼容性对你很重要，请关注When can I use…
嗯，使用CSS3选择器是件很有趣的事情，像做简单的数学题一样。
0
投稿猜你喜欢
- <％'***********************************************'函数
- 描述event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。eve
- SQL Server数据库涉及到的数据仓库概念：1．多维数据集：多维数据集是联机分析处理 (OLAP) 中的主要对象，是一项可对数据仓库中的
- 一，fso.GetFile提取文件相应的 File 对象1，getfile.asp<％whichfile=Serv
- 总结常用基本点如下： 1、触发器有两种类型：数据定义语言触发器（DDL触发器）和数据操纵语言触发器（DML触发器）。 DDL触发器：在用户对
你是否曾经想在数据库中存储一个日期而没有时间部分，或者想存储一个时间值希望有更高的精度？在SQL Server 2008的介绍中，微软介绍了- BLOG地址：http://www.planabc.net/article.asp?id=107学习标准的朋友，一般都会在学习的过程中接触到
- 如何在服务器端调用winzip命令行对上传的多个文件打包压缩？要解决这个问题，首先要了解一下Windows Scripting Host,简
- 大家都知道，在ASP中可以使用Request.ServerVariables("REMOTE_ADDR")来取得客户端的
- 很实用的过滤重复数据的asp代码，函数如下：<％'**************************************
- SQL Server数据库查询速度慢的原因有很多，常见的有以下几种：1、没有索引或者没有用到索引(这是查询慢最常见的问题，是程序设计的缺陷)
- 我的长博文不少，比较影响阅读体验，有必要添加一个文章目录功能。相比 Wordpress， Typecho 的插件就比较少了。我想找一个像掘金
- 方案5 使用xml参数 对sql server xml类型参数不熟悉的童鞋需要先了解下XQuery概念，这里简单提下XQuery 是用来从
- BluePrint是一个非常成熟也非常流行的CSS框架，很多网站和wordpress基于Blueprint搭建前端结构。最近，bluepri
- 众所周知，随着数据库体积的日益庞大，其备份文件的大小也水涨船高。虽然说通过差异备份与完全备份配套策略，可以大大的减小SQL Server数据
- Sql Server的存储过程是一个被命名的存储在服务器上的Transacation-Sql语句集合,是封装重复性工作的一种方法,它支持用户
- 现在网页的设计都讲究整体统一风格，无论是网页的文字、图像，还是浏览器的滚动条都要求颜色和风
- 谁在用这些导航google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜
- 阅读上一篇：打造设计你自己的字体 ⅠMyFonts.com上销售的字体总数已经超过55,000个。现有字体的巨大数量表明了一个事实：我们在设
- 一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字
