定義和用法

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

n 可以是數字、關鍵詞或公式。

先看下面一段代碼：

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

如果我們想單獨給某一行添加特殊的樣式代碼，在不使用nth-child的情況下，通常會給那一行一個類標簽：

，然后再對tag進行定義樣式。

使用nth-child則會變的很簡單：

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

這樣我們就對第三行的樣式進行了改變，其中3指的就是第三個li，從1開始，以此類推。

更多示例代碼：

.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;

}

拓展：

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

效果圖如下：

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

其實這個功能用的地方也是比較多的，比如表格隔行換色，新聞列表每隔5行加一條橫線，都可以用它來實現。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。