久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

15
2019/06

CSS 選擇器 nth-child 的幾種用法

發(fā)布時(shí)間:2019-06-15 13:50:29
發(fā)布者:小逗號(hào)
瀏覽量:
0

網(wǎng)站開發(fā)過程中 ,我們經(jīng)常會(huì)碰到一些選擇器的要求 比如: 第一項(xiàng)  或者最后一項(xiàng) ,或者第幾項(xiàng) ,亦或者隔行  第幾項(xiàng)之后的那些項(xiàng)之類的 下面我們就分別來介紹下。

常見的一些用法就是 第一項(xiàng)  第N項(xiàng) 和 最后一項(xiàng),這是開發(fā)中常用的選擇要求 寫法如下 :

         first-child        first-child:選擇列表中的第一個(gè)標(biāo)簽。

        nth-child(n)        nth-child(n):選擇列表中的第 n 個(gè)標(biāo)簽。

       last-child        last-child:選擇列表中的最后一個(gè)標(biāo)簽。

還有就是偶數(shù)選擇:

        nth-child(even)         nth-child(even):選擇列表的偶數(shù)行。

        或者另外一種寫法  nth-child(2n);

    奇數(shù)選擇器:

        nth-child(odd)

         nth-child(odd) :選擇列表的奇數(shù)行。

        同樣另外一種寫法nth-child(2n-1).nth-child(2n+1);

上面這些都是開發(fā)中比較常見的一些選擇方法 ,我們還可以 更加靈活的使用nth-child()進(jìn)行操作;

         nth-child(-n+n)

          nth-child(-n+n):選擇第N個(gè)數(shù)之前的項(xiàng)(此處第二個(gè)N表示的是具體的數(shù)字)。

          nth-child(-n+n)

          nth-child(-n+n):選擇第N個(gè)數(shù)之后的項(xiàng)(此處第二個(gè)N表示的是具體的數(shù)字)。

          nth-last-child(n)          nth-last-child(n):選擇倒數(shù)第 n 個(gè)元素(此處N表示的是具體的數(shù)字)。

          nth-last-child(n+n)          nth-last-child(n+n):選擇倒數(shù)第 n 個(gè)之前的元素(此處第二個(gè)N表示的是具體的數(shù)字) 

          nth-last-child(nn)          nth-last-child(3n): 這里選擇的是第3.6.9....項(xiàng)  表示選擇3的倍數(shù)的項(xiàng)。

說了這么多 相信大家已經(jīng)對(duì)nth:child選擇器有了更詳細(xì)的了解 希望大家能夠熟練應(yīng)用 提高開發(fā)速度。(濟(jì)南文匯軟件 前端開發(fā)工程師為您整理)

關(guān)鍵詞:
返回列表