CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结
生活随笔
收集整理的這篇文章主要介紹了
CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
標(biāo)簽的情況
tag:nth-child(n)：很好理解。1.各層級中的第n個元素；2.且該元素是tag
tag:nth-of-type(n)：和上面不一樣。1.在各層級中第n個出現(xiàn)的tag元素，與它是在父級下的第幾個位置無關(guān)。
類的情況
.class:nth-child(n)：和tag模式基本是一致的。1.各層級中的第n個元素；2.是class類
.class:nth-of-type(n)：和tag模式就有些區(qū)別了。1.對層級中存在的標(biāo)簽，分別對應(yīng)找出第n個出現(xiàn)的標(biāo)簽，2.是class類
示例代碼
<!DOCTYPE html> <html> <head><title>temdiv</title><style>.item:nth-of-type(2){color:red;}</style> </head> <body><span>1</span><div>2</div><div><span class="item">type111,child111</span></div><div><div class="item">type111,child111</div></div><div class="item">6</div><div>7</div><div class="item">8</div><span class="item">type222</span><div class="item">10</div><div>11</div><div class="item">12</div><span>13</span><div><span>14</span><span class="item">type222，child222</span><span class="item">16</span><div class="item">type111</div><div class="item">type222</div><div class="item">19</div></div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： element更改导航菜单被选中项的背景
- 下一篇： 案例 | 荔枝微课基于 kubernet