jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)


Posted in Javascript onMay 24, 2010

对此,我把CSS3标准中nth-child()用法大致介绍下:

CSS3伪类选择器:nth-child()

简单的归纳下nth-child()的几种用法。

第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。

(EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二:nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
(EG) li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
第三:nth-child(an+b) 与 :nth-child(an-b) 先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)
(EG)li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/
第四:nth-child(-an+b) 此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。
(EG) li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/

第五:nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

jQuery中用此方法可以实现条纹效果:

$("table tr:nth-child(even)").addClass("striped");

even 可以换成别的参数,上面介绍的五种情况都可以。

后面的addClass("striped") striped 是个CSS class名称。

学习jquery顺便学习了 CSS中的一些选择器。
希望能坚持下来。

Javascript 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 #Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 #Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 #Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 #Javascript
Javascript笔记一 js以及json基础使用说明
May 22 #Javascript
javascript Array数组对象的扩展函数代码
May 22 #Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 #Javascript
You might like
深入PHP运行环境配置的详解
2013/06/04 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
js创建对象的方式总结
2015/01/10 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python删除不需要的python文件方法
2018/04/24 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python中线程和进程有何区别
2020/06/17 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
什么是索引指示器
2012/08/20 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
中级会计职业生涯规划范文
2014/01/16 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
社区健康教育工作方案
2014/06/03 职场文书
小学领导班子对照材料
2014/08/23 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android