css3正方体选中父层 子层解体_CSS3 :nth-child(n)选择器 匹配属于其父元素的第N个子元素...
定義和用法
: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)題。
- 上一篇: 学习Java能够从事哪些工作?
- 下一篇: 转换背景色 html,html – CS