zoukankan      html  css  js  c++  java
  • jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大。

    对此,我把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中的一些选择器。 

    原文:http://www.jb51.net/article/23617.htm

  • 相关阅读:
    self 和 super 关键字
    NSString类
    函数和对象方法的区别
    求两个数是否互质及最大公约数
    TJU Problem 1644 Reverse Text
    TJU Problem 2520 Quicksum
    TJU Problem 2101 Bullseye
    TJU Problem 2548 Celebrity jeopardy
    poj 2586 Y2K Accounting Bug
    poj 2109 Power of Cryptography
  • 原文地址:https://www.cnblogs.com/rancheer/p/4981431.html
Copyright © 2011-2022 走看看