定義和用法

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

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

先看下面一段代碼：

• 第一行
• 第二行
• 第三行
• 第四行
• 第五行

如果我們想單獨(dú)給某一行添加特殊的樣式代碼，在不使用nth-child的情況下，通常會(huì)給那一行一個(gè)類標(biāo)簽：

，然后再對(duì)tag進(jìn)行定義樣式。

使用nth-child則會(huì)變的很簡(jiǎn)單：

.demo>li:nth-child(3){color:#000000}

這樣我們就對(duì)第三行的樣式進(jìn)行了改變，其中3指的就是第三個(gè)li，從1開(kāi)始，以此類推。

更多示例代碼：

.demo{

width:?90%;

background-color:?#EEEEEE;

padding:?.1rem;

border-radius:?.15rem;

line-height:?.5rem;

margin:?.5rem?auto;

padding-left:?.2rem;

}

.demo?li{

margin:?.1rem?0;

padding-left:?.1rem;

background-color:?#52C41A;

color:?#000000;

}

.demo>li:nth-child(1){

background-color:?#000000;

color:?#FFFCE7;

}

.demo>li:nth-child(2){

background-color:#1D52F0;

color:?#FFFCE7;

}

.demo>li:nth-child(3){

background-color:#21D1B1;

color:?#FFFCE7;

}

拓展：

上面介紹的是單獨(dú)對(duì)某一行寫樣式，也就是說(shuō)n是1，2,3....這樣的數(shù)字，如果數(shù)字改成通配符這樣的：nth-child(2n)，會(huì)有何種效果呢？

效果圖如下：

也就是說(shuō)，n通配每一行，2n則是指2的倍數(shù)行，也就是第二行和第四行，以此類推。

其實(shí)這個(gè)功能用的地方也是比較多的，比如表格隔行換色，新聞列表每隔5行加一條橫線，都可以用它來(lái)實(shí)現(xiàn)。

nth-child(3n-1)這樣的計(jì)算也是允許的。

總結(jié)

以上是生活随笔為你收集整理的css3正方体选中父层 子层解体_CSS3 :nth-child(n)选择器 匹配属于其父元素的第N个子元素...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。