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 标题的自动翻转实现代码
Oct 14 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
vue-router单页面路由
Jun 17 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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适配器模式介绍
2012/08/14 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
python 使用值来排序一个字典的方法
2018/11/16 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
python 操作excel表格的方法
2020/12/05 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
七夕活动策划方案
2014/08/16 职场文书
车辆年审委托书范本
2014/09/18 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
承诺函范文
2015/01/21 职场文书
客房服务员岗位职责
2015/02/09 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
Golang入门之计时器
2022/05/04 Golang