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 CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
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正则的Unknown Modifier错误解决方法
2010/03/02 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
jQuery 使用手册(五)
2009/09/23 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jQuery中get()方法用法实例
2014/12/27 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
js实现搜索栏效果
2018/11/16 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
开始着手第一个Django项目
2015/07/15 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
explicit和implicit的含义
2012/11/15 面试题
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
努力工作保证书
2015/02/28 职场文书
初中家长意见
2015/06/03 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
详解Go语言中Get/Post请求测试
2022/06/01 Golang