CSS中的nth-child和nth-of-type选择器
生活随笔
收集整理的這篇文章主要介紹了
CSS中的nth-child和nth-of-type选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS中的nth-child和nth-type-of選擇器
先寫一個例子
<head><style>*{margin: 0px;padding: 0px;}.item{vertical-align: top;border: 1px solid black;height: 200px;width: 200px;margin: 10px;display: inline-block;}</style> </head> <body><div class="item"><p>這是一個p標簽</p><p>這是一個p標簽</p><p>這是一個p標簽</p><p>這是一個p標簽</p><h2>這是一個h2</h2><h2>這是一個h2</h2><h2>這是一個h2</h2></div><div class="item"><p>這是一個p標簽</p><p>這是一個p標簽</p><p>這是一個p標簽</p><p>這是一個p標簽</p><h2>這是一個h2</h2><h2>這是一個h2</h2><h2>這是一個h2</h2></div><div class="item"><div>這是一個div</div><div>這是一個div</div><div>這是一個div</div></div><div class="item">這是一個div</div><div class="item">這是一個div</div><div class="item">這是一個div</div> </body>現在的效果是這樣的
1，nth-child選擇器
:nth-child()是一個偽類選擇器：
括號里面內容可以放數字，表達式，以及代詞名稱。
冒號前面加空格代表選擇子級，不加空格代表選擇同級。。
1）選擇將同級div中的第一個div將其背景改為紅色
div:nth-child(1){backgroundColor:red;}結果
2）選擇將div子級的第一個元素背景改為紅色，這里div后面有一個空格
不加空格就是同級同類，加空格就是子級所有元素
3)選擇前3個div，將背景改為紅色
div:nth-child(-n+3){background-color:red;}
4)選擇是2的倍數的div，將其背景改為紅色
5）選擇前2個div，將其背景改為紅色
div:nth-child(-n+2){background-color:red;}nth-child中可以接收類似于 ‘an+b’這種表達式，a，b為常數
當a，b都大于0的時候，被選擇的元素就是按照n取自然數后表達式的值來進行選擇的。
當a為 -1，b為某一個數的時候，表示選擇前幾個元素
再說明一下，不加空格操作的是同級元素，這個時候，在計數的時候，會把不同類的元素一起計數
還是這段代碼，但是我們將第4個元素改為p
選擇是2的倍數的div，將其背景改為紅色
可以發現p標簽被列入計數了，但是并沒有因為是偶數而被選擇。
2，nth-last-child選擇器
這個選擇器和nth-child選擇器幾乎相同，不同的是它所有的計數起點都是從最后一個開始。
3，nth-of-type選擇器
這個選擇器的語法規則和nth-child選擇器也幾乎是一樣的。。不同點則是,它不會將不同類的元素列入計數。
接著上面一個例子，比如：
選擇位置是2的倍數的div，將其背景改為紅色
這里就很明顯了，第4個p標簽并沒有被列入div標簽的計數行列。
4，nth-last-of-type選擇器
這個選擇器和nth-of-type選擇器幾乎相同，不同的是它所有的計數起點都是從最后一個開始。
總結
以上是生活随笔為你收集整理的CSS中的nth-child和nth-of-type选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 3D数学基础：正交矩阵
- 下一篇： CSS3伪类选择器:nth-child(