• :nth-child(an+b)


    语法:

    :nth-child(an+b)
    为什么选择它,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+。

    描述:

    伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明。

    第一种:简单数字序号写法
    :nth-child(number)

    直接匹配第number个元素。参数number必须为大于0的整数。

    例子:

    li:nth-child(3){background:orange;}
    第二种:倍数写法
    :nth-child(an)

    匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。

    例子:

    li:nth-child(3n){background:orange;}

    第三种:倍数分组匹配
    :nth-child(an+b) 与 :nth-child(an-b)

    先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)

    例子:

    li:nth-child(3n+1){background:orange;}

    li:nth-child(3n+5){background:orange;}

    li:nth-child(5n-1){background:orange;}

    li:nth-child(3n±0){background:orange;}

    li:nth-child(±0n+3){background:orange;}

    第四种:反向倍数分组匹配
    :nth-child(-an+b)

    此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。

    例子:

    li:nth-child(-3n+8){background:orange;}

    li:nth-child(-1n+8){background:orange;}

    第五种:奇偶匹配
    :nth-child(odd) 与 :nth-child(even)

    分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。







    移除HTML中最后和第一个元素的间距(margin)



    手动添加CLASS

    有时候,我们需要移除一个列表元素中,最后一个和第一个元素的间距(margin)属性,你可以手动给他们设置CSS样式:

    .first { margin-top: 0 !important; margin-left: 0 !important; }
    .last { margin-bottom: 0 !important; margin-right: 0 !important; }
    TOP/BOTTOM归零是一个有用的重叠布局技术,LEFT/RIGHT用于水平布局,但是这个方法依赖于你需要手动的添加CSS样式到HTML标签中,如果是动态生成的元素,设置起来会非常的麻烦,伪类选择器可能是一个更好的选择方法。

    伪类

    下面的CSS选择通过:first-child和:last-child选取第一个元素和最后元素,然后设置我们需要的样式。

    * > :first-child { margin-top: 0 !important; margin-left: 0 !important; }
    * > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; }
    你可能需要替换*为具体的元素标签,来满足你的项目需求。

    索引等差元素

    假如我们有一个图片的列表,3行3列的布局,需要去除第三个、第六个和第九个元素的右间距,nth-child伪选择器可以帮助我们:

    * > :nth-child(3n+3) { margin-right: 0; }
    那里的方程,3N + 3,像这样的作品:

    (3×0)+ 3 = 3
    (3×1)+ 3 = 6
    (3×2)+ 3 = 9

    jQuery

    jQuery使用CSS3选择器,包括: :first-child, :last-child, and :nth-child()。这意味着在不或是浏览器不完全支持这些选择,他们将工作在jQuery的,所以你可以用javascript支持替代CSS支持。例如:

    $("* > :nth-child(3n+3)").css("margin-right", 0);
    浏览器的支持

    :first-child and :last-child在所有主要浏览器的最新版本的作品,但不是在IE 6。:first-child是在IE 7 +支持。 :nth-child能在Safari 3、Firefox 3.5和Chrome 1 +上工作,但还不能工作在IE8。

  • 相关阅读:
    P2149 [SDOI2009]Elaxia的路线
    P1346 电车
    P3174 [HAOI2009]毛毛虫
    P3047 [USACO12FEB]附近的牛Nearby Cows
    P4053 [JSOI2007]建筑抢修
    P2607 [ZJOI2008]骑士
    [HNOI2006]马步距离
    [POI2014]Hotel
    [BZOJ3856]Monster
    [BZOJ2819]Nim
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5263766.html
Copyright © 2020-2023  润新知