您好,登錄后才能下訂單哦!
小編給大家分享一下css中選擇器nth-child()和nth-of-type()怎么用,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
一、:nth-child()和:nth-of-type()的支持度
所有主流瀏覽器均支持:nth-child()和:nth-of-type()選擇器,除了IE8及更早的版本。
二、:nth-child()和:nth-of-type()的一般使用方法
1、:nth-child(x);選擇第x的元素
2、:nth-child(x*n)x的n倍元素
3、:nth-child(n+x);選擇=>x的元素
4、:nth-child(-n+x)選擇=<x的元素
5、:nth-child(nx+1);nx-1隔開n*x選取一個
6、nth-child(odd)/nth-child(even)奇數(shù)偶數(shù)
使用的時候請把《*》刪除
三、:nth-child()和:nth-of-type()的一些不同之處
:nth-child()—–》
混合型跳過模式:這個是我自己取得名字。
意思就是說同一個父級下如果我們選擇了第二個元素p:nth-child(2)。
但是第二個元素不是p標(biāo)簽而是其他的標(biāo)簽,那么選擇的標(biāo)簽不成立,選擇不了。
代碼如下:
<divid="a1">
<p>CGLweb前端</p>
<div>CGLweb前端</div>
<p>CGLweb前端</p>
</div>
<styletype="text/css">
#a1p:nth-child(2){background:#000000
</style>
:nth-of-type()—–》
匹配標(biāo)簽選擇模式,比如說代碼div:nth-of-type(2n),不考慮其他的標(biāo)簽,
先把同級div排列一下,然后2的倍數(shù)的時候選擇他。
<divid="a2">
<p>p1</p>
<div>div1</div>
<p>p2</p>
<div>div2</div>
<div>div3</div>
<p>p3</p>
<div>div4</div>
<div>div5</div>
<div>div6</div>
</div>
<styletype="text/css">
#a2div:nth-of-type(2n){background:#000000;color:#fff;}
</style>
看完了這篇文章,相信你對“css中選擇器nth-child()和nth-of-type()怎么用”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。