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 相关文章推荐
Javascript & DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
XENON基于JSON变种
Jul 27 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
Angular2之二级路由详解
Aug 31 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
uniapp开发小程序的经验总结
Apr 08 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,不用COM,生成excel文件
2006/10/09 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
利用python 下载bilibili视频
2020/11/13 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
软件测试工程师笔试题带答案
2015/03/27 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
《乞巧》教学反思
2014/02/27 职场文书
信访工作经验交流材料
2014/05/23 职场文书
施工安全汇报材料
2014/08/17 职场文书
学校财务管理制度
2015/08/04 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技