邯鄲網(wǎng)站建設(shè)講解CSS3 :nth-child() 的知識(shí)
日期:2022-10-13發(fā)布:首創(chuàng)網(wǎng)絡(luò)瀏覽:888次
邯鄲網(wǎng)站建設(shè)講解CSS3:nth-child()的知識(shí),CSS3中nth-child()偽類對(duì)于在HTML中創(chuàng)建格式化的Excel樣式表非常有用。也用于生成網(wǎng)格布局而不必求助于表格。首先我們來了解一下nth-child()偽類的相關(guān)知識(shí)。nth-···
本文關(guān)鍵字:小程序開發(fā),APP開發(fā),軟件開發(fā),網(wǎng)站建設(shè),平面設(shè)計(jì),VI設(shè)計(jì),logo設(shè)計(jì),邯鄲網(wǎng)絡(luò)公司,邯鄲網(wǎng)站建設(shè),網(wǎng)站優(yōu)化,SEO,企業(yè)畫冊(cè),首創(chuàng)網(wǎng)絡(luò)
邯鄲網(wǎng)站建設(shè)講解CSS3:nth-child()的知識(shí),CSS3中nth-child()偽類對(duì)于在HTML中創(chuàng)建格式化的Excel樣式表非常有用。也用于生成網(wǎng)格布局而不必求助于表格。
首先我們來了解一下nth-child()偽類的相關(guān)知識(shí)。
nth-child()偽類的基本規(guī)則:
我們使用的語法是:nth-child(an+b)其中a是頻率,b是初始偏移量。這生成了一個(gè)從n=0開始的無限級(jí)數(shù),但只包含正值。
一些例子可能會(huì)使這更清楚:
2n,2n+0
2,4,6,8,10,12......
2n+1或奇數(shù)
1,3,5,7,9,11......
2n+2
2,4,6,8,10,12......
2n+3
3,5,7,9,11,12......
2n+4
4,6,8,10,12,14......
3n,3n+0或3n+3
3,6,9,12,15,18......
3n+1
1,4,7,10,13,16......
因此,你可以看到系列從b開始,然后為每個(gè)值增加a。跳過任何零或負(fù)的結(jié)果意味著我們不能在DOM樹中向后看。
nth-child部分用法如下
:nth-child(2)選取第幾個(gè)標(biāo)簽,“2可以是你想要的數(shù)字”
.demo01li:nth-child(2){background:#090}
:nth-child(n+4)選取大于等于4標(biāo)簽,“n”表示從整數(shù),下同
.demo01li:nth-child(n+4){background:#090}
:nth-child(-n+4)選取小于等于4標(biāo)簽
.demo01li:nth-child(-n+4){background:#090}
:nth-child(2n)選取偶數(shù)標(biāo)簽,2n也可以是even
.demo01li:nth-child(2n){background:#090}
:nth-child(2n-1)選取奇數(shù)標(biāo)簽,2n-1可以是odd
.demo01li:nth-child(2n-1){background:#090}
:nth-child(3n+1)自定義選取標(biāo)簽,3n+1表示“隔二取一”
:first-child選取第一個(gè)標(biāo)簽
:last-child選取最后一個(gè)標(biāo)簽
:nth-child(2)選取第二個(gè)標(biāo)簽
:nth-child(n)選取第N個(gè)標(biāo)簽
:nth-child(2n):nth-child(even)選取偶數(shù)標(biāo)簽
:nth-child(2n+1):nth-child(odd)選取奇數(shù)標(biāo)簽
:nth-child(n+4)選取大于等于4的標(biāo)簽
:nth-child(-n+4)選取小于等于4的標(biāo)簽
:nth-child(3n+1)自定義選擇標(biāo)簽,n取0開始,隔二取一個(gè)標(biāo)簽
:nth-last-child(2)選取倒數(shù)第二個(gè)標(biāo)簽
:nth-last-child(n)選取倒數(shù)第N個(gè)標(biāo)簽
- 歡迎大家閱讀瀏覽,部分內(nèi)容來源于網(wǎng)絡(luò),如有侵權(quán),請(qǐng)聯(lián)系我們刪除!
服務(wù)項(xiàng)目
熱門信息
- 邯鄲網(wǎng)絡(luò)公司:模板建站的好處有哪些?
- 3632024-04-25
- 4.20日音訊,邯鄲網(wǎng)絡(luò)公司:企業(yè)官網(wǎng)有必要做嗎?
- 2122024-04-20
- 4.20日音訊,邯鄲網(wǎng)絡(luò)公司:為什么模板建站如此便宜?
- 2862024-04-20
- 4.9日訊,企業(yè)網(wǎng)站建設(shè)如何發(fā)揮網(wǎng)絡(luò)營銷功能?
- 4082024-04-09
- 4.9日音訊,企業(yè)網(wǎng)站維護(hù)的日常工作
- 2902024-04-09
- 4.5日訊,建設(shè)一個(gè)外貿(mào)網(wǎng)站多少錢?
- 4852024-04-05
- 邯鄲網(wǎng)絡(luò)公司:外貿(mào)網(wǎng)站制作的8個(gè)步驟
- 3762024-03-05
- 企業(yè)網(wǎng)站如何制作才能取得更好的效果
- 5652024-02-29
- 簡(jiǎn)單3步,輕松做企業(yè)官網(wǎng)
- 6812024-02-18