加勒比HEZYO黑人专区-久久精品国产99国产精品亚洲-精品国产18久久久久久-久久人妻少妇嫩草AV

歡迎光臨 織晶網(wǎng)絡(luò)官網(wǎng)！

  • 服務(wù)支持
  • 020-39182790
技術(shù)文檔您現(xiàn)在的位置：首頁 > 服務(wù)支持 > 技術(shù)文檔

詳解CSS中nth-child的用法

作者：織晶客服部   發(fā)布于：2016/11/10 11:05:02  點(diǎn)擊量：  來源：織晶網(wǎng)絡(luò)

定義和用法

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。

n 可以是數(shù)字、關(guān)鍵詞或公式。

 

CSS3中有一個(gè)神奇的玩意，可以輕松選取你想要的標(biāo)簽并給與修改添加樣式，是不是很給力，它就是“:nth-child”。

下面我將用幾個(gè)典型的實(shí)例來給大家講解:nth-child的實(shí)際用途：

Tips：還用低版本的IE瀏覽器的哥們請繞過！

:nth-child(2)選取第幾個(gè)標(biāo)簽，“2可以是你想要的數(shù)字” 

.demo01 li:nth-child(2){background:#090}

:nth-child(n+4)選取大于等于4標(biāo)簽，“n”表示從整數(shù)，下同

點(diǎn)此查看實(shí)例展示 

.demo01 li:nth-child(n+4){background:#090}

:nth-child(-n+4)選取小于等于4標(biāo)簽

點(diǎn)此查看實(shí)例展示 

.demo01 li:nth-child(-n+4){background:#090}

:nth-child(2n)選取偶數(shù)標(biāo)簽，2n也可以是even

點(diǎn)此查看實(shí)例展示 

.demo01 li:nth-child(2n){background:#090}

:nth-child(2n-1)選取奇數(shù)標(biāo)簽，2n-1可以是odd

點(diǎn)此查看實(shí)例展示 

.demo01 li:nth-child(2n-1){background:#090}

:nth-child(3n+1)自定義選取標(biāo)簽，3n+1表示“隔二取一”

點(diǎn)此查看實(shí)例展示 

.demo01 li:nth-child(3n+1){background:#090}

:last-child選取最后一個(gè)標(biāo)簽

點(diǎn)此查看實(shí)例展示 

.demo01 li:last-child{background:#090}

:nth-last-child(3)選取倒數(shù)第幾個(gè)標(biāo)簽,3表示選取第3個(gè)

點(diǎn)此查看實(shí)例展示 

.demo01 li:nth-last-child(3){background:#090}

ok，:nth-child的這些用法在實(shí)際中很用得著，不用單獨(dú)給需要選取的標(biāo)簽加上ID或Class，是不是很拉風(fēng)！




上一篇：學(xué)好js，這些js函數(shù)概念一定要知道

下一篇：HTML5語義化總結(jié)