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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
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
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
python使用Apriori算法进行关联性解析
2017/12/21 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
解决Python使用列表副本的问题
2019/12/19 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
项目经理任命书
2014/06/04 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
社区国庆节活动总结
2015/03/23 职场文书
企业法人任命书
2015/09/21 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书