nth-child() 支持的瀏覽器
下面我們來了解一下css選擇器里面的幾個
| :only-child | p:only-child | 選擇屬于其父元素的唯一子元素的每個 <p> 元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 選擇屬于其父元素的第二個子元素的每個 <p> 元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，從最后一個子元素開始計數。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇屬于其父元素第二個 <p> 元素的每個 <p> 元素。 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是從最后一個子元素開始計數。 | 3 |
| :last-child | p:last-child | 選擇屬于其父元素最后一個子元素每個 <p> 元素。 | 3 |
| :first-child | p:first-child | 選擇屬于父元素的第一個子元素的每個 <p> 元素。 |
我們可以使用 :nth-child(n) 來自動判斷第4個
css代碼如下
<style>
.list li:nth-child(4n){ border-bottom:1px dashed #ccc;} /*4n就是4的倍數都加這個樣式*/
</style>
其它使用技巧
nth-child() 中，Odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞（第一個子元素的下標是 1），常用于隔行換色。
使用公式 (an + b)。描述：表示周期的長度，n 是計數器（從 0 開始），b 是偏移值。
在這里，我們指定了下標是 3 的倍數的所有 p 元素的背景色：
p:nth-child(3n+0)
{
background:#ff0000;
}
上一篇 一個女程序員眼中的程序員
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
