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 相关文章推荐
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
js密码强度校验
Nov 10 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
JS实现小球的弹性碰撞效果
Nov 11 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
详解React 元素渲染
Jul 07 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作的文本留言本的例子(一)
2006/10/09 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
Vue自定义指令详解
2017/07/28 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
python 显示数组全部元素的方法
2018/04/19 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
python实现画图工具
2020/08/27 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
工作个人的自我评价
2014/01/14 职场文书
国旗下的演讲稿
2014/05/08 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
小学优秀教师材料
2014/12/15 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers