东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
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)鍵詞:
返回列表