邯鄲網(wǎng)站建設(shè)講解CSS3 :nth-child() 的知識
日期:2022-10-13發(fā)布:首創(chuàng)網(wǎng)絡(luò)瀏覽:889次
邯鄲網(wǎng)站建設(shè)講解CSS3:nth-child()的知識,CSS3中nth-child()偽類對于在HTML中創(chuàng)建格式化的Excel樣式表非常有用。也用于生成網(wǎng)格布局而不必求助于表格。首先我們來了解一下nth-child()偽類的相關(guān)知識。nth-···
本文關(guān)鍵字:小程序開發(fā),APP開發(fā),軟件開發(fā),網(wǎng)站建設(shè),平面設(shè)計,VI設(shè)計,logo設(shè)計,邯鄲網(wǎng)絡(luò)公司,邯鄲網(wǎng)站建設(shè),網(wǎng)站優(yōu)化,SEO,企業(yè)畫冊,首創(chuàng)網(wǎng)絡(luò)
邯鄲網(wǎng)站建設(shè)講解CSS3:nth-child()的知識,CSS3中nth-child()偽類對于在HTML中創(chuàng)建格式化的Excel樣式表非常有用。也用于生成網(wǎng)格布局而不必求助于表格。
首先我們來了解一下nth-child()偽類的相關(guān)知識。
nth-child()偽類的基本規(guī)則:
我們使用的語法是:nth-child(an+b)其中a是頻率,b是初始偏移量。這生成了一個從n=0開始的無限級數(shù),但只包含正值。
一些例子可能會使這更清楚:
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開始,然后為每個值增加a。跳過任何零或負的結(jié)果意味著我們不能在DOM樹中向后看。
nth-child部分用法如下
:nth-child(2)選取第幾個標簽,“2可以是你想要的數(shù)字”
.demo01li:nth-child(2){background:#090}
:nth-child(n+4)選取大于等于4標簽,“n”表示從整數(shù),下同
.demo01li:nth-child(n+4){background:#090}
:nth-child(-n+4)選取小于等于4標簽
.demo01li:nth-child(-n+4){background:#090}
:nth-child(2n)選取偶數(shù)標簽,2n也可以是even
.demo01li:nth-child(2n){background:#090}
:nth-child(2n-1)選取奇數(shù)標簽,2n-1可以是odd
.demo01li:nth-child(2n-1){background:#090}
:nth-child(3n+1)自定義選取標簽,3n+1表示“隔二取一”
:first-child選取第一個標簽
:last-child選取最后一個標簽
:nth-child(2)選取第二個標簽
:nth-child(n)選取第N個標簽
:nth-child(2n):nth-child(even)選取偶數(shù)標簽
:nth-child(2n+1):nth-child(odd)選取奇數(shù)標簽
:nth-child(n+4)選取大于等于4的標簽
:nth-child(-n+4)選取小于等于4的標簽
:nth-child(3n+1)自定義選擇標簽,n取0開始,隔二取一個標簽
:nth-last-child(2)選取倒數(shù)第二個標簽
:nth-last-child(n)選取倒數(shù)第N個標簽
- 歡迎大家閱讀瀏覽,部分內(nèi)容來源于網(wǎng)絡(luò),如有侵權(quán),請聯(lián)系我們刪除!
服務(wù)項目
熱門信息
- 邯鄲網(wǎng)絡(luò)公司:模板建站的好處有哪些?
- 3642024-04-25

- 4.20日音訊,邯鄲網(wǎng)絡(luò)公司:企業(yè)官網(wǎng)有必要做嗎?
- 2132024-04-20

- 4.20日音訊,邯鄲網(wǎng)絡(luò)公司:為什么模板建站如此便宜?
- 2872024-04-20

- 4.9日訊,企業(yè)網(wǎng)站建設(shè)如何發(fā)揮網(wǎng)絡(luò)營銷功能?
- 4092024-04-09

- 4.9日音訊,企業(yè)網(wǎng)站維護的日常工作
- 2912024-04-09

- 4.5日訊,建設(shè)一個外貿(mào)網(wǎng)站多少錢?
- 4862024-04-05

- 邯鄲網(wǎng)絡(luò)公司:網(wǎng)站建設(shè)開發(fā)有哪些細節(jié)需要注意?
- 5402024-03-07

- 邯鄲網(wǎng)絡(luò)公司:外貿(mào)網(wǎng)站制作的8個步驟
- 3772024-03-05

- 企業(yè)網(wǎng)站如何制作才能取得更好的效果
- 5662024-02-29

- 簡單3步,輕松做企業(yè)官網(wǎng)
- 6822024-02-18
