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必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 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 cookis创建实现代码
2009/03/16 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
php pdo操作数据库示例
2017/03/10 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
python和opencv实现抠图
2018/07/18 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
工作疏忽检讨书
2014/01/25 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
党员民主评议个人总结
2014/10/20 职场文书
发票退票证明
2015/06/24 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
热爱劳动主题班会
2015/08/14 职场文书