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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
vue之数据交互实例代码
Jun 16 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
详解vue中移动端自适应方案
May 05 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
快速解决element的autofocus失效问题
Sep 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 过滤危险html代码
2009/06/29 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python super()函数的基本使用
2020/09/10 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
大一自我鉴定范文
2013/10/04 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
学生安全责任书
2014/04/15 职场文书
中学生打架检讨书
2014/10/13 职场文书
初中信息技术教学计划
2015/01/22 职场文书
刘胡兰观后感
2015/06/16 职场文书
政审证明材料
2015/06/19 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
python自动化测试之Selenium详解
2022/03/13 Python