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中的Screen屏幕对象
Jan 16 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 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
php学习笔记之 函数声明
2011/06/09 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
基于PHP制作验证码
2016/10/12 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python for i in range ()用法详解
2020/09/18 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
尽职尽责村干部自我鉴定
2014/01/23 职场文书
心理健康课教学反思
2014/02/13 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
Python中的pprint模块
2021/11/27 Python
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
分享Python获取本机IP地址的几种方法
2022/03/17 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
python获取带有返回值的多线程
2022/05/02 Python