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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
Node 模块原理与用法详解
May 13 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
JavaScript 事件系统
2010/07/22 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python ftplib模块使用代码实例
2019/12/31 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
大整数数相乘的问题
2012/07/22 面试题
C#笔试题
2015/07/14 面试题
如何进行Linux分区优化
2016/09/13 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
节能减排倡议书
2014/04/15 职场文书
校企合作协议书
2014/04/16 职场文书
《悯农》教学反思
2014/04/28 职场文书
爱我中华教学反思
2014/04/28 职场文书
兴趣小组活动总结
2014/05/05 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
企业务虚会发言材料
2014/10/20 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技