jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

莉仙滴甜

莉仙滴甜

2016-02-19 13:03

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even),一起来学习了解下吧!
对此,我把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中的一些选择器。
希望能坚持下来。
展开更多 50%)
分享

猜你喜欢

jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

Web开发
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

CSS3伪类选择器:nth-child()

Web开发
CSS3伪类选择器:nth-child()

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery学习之探究nth-child(N)选择符

Web开发
jQuery学习之探究nth-child(N)选择符

jquery CSS选择器笔记

Web开发
jquery CSS选择器笔记

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery 学习笔记 选择器之二

Web开发
JQuery 学习笔记 选择器之二

JQuery 学习笔记 选择器之三

Web开发
JQuery 学习笔记 选择器之三

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Windows 8怎么删除搜索痕迹?

Windows 8怎么删除搜索痕迹?

基于jquery的让页面控件不可用的实现代码

基于jquery的让页面控件不可用的实现代码
下拉加载更多内容 ↓