最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

本篇內(nèi)容介紹了“css如何給指定第幾個(gè)li加樣式”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián) - 資陽(yáng)托管服務(wù)器，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽(yáng)服務(wù)器托管，德陽(yáng)服務(wù)器托管，遂寧服務(wù)器托管，綿陽(yáng)服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，資陽(yáng)托管服務(wù)器，西南服務(wù)器托管，四川/成都大帶寬，成都機(jī)柜租用，四川老牌ＩＤＣ服務(wù)商

4種方法：1、用“:first-child”給第1個(gè)li加樣式，語(yǔ)法“l(fā)i:first-child{樣式代碼}”；2、用“:last-child”給最后1個(gè)li加樣式，語(yǔ)法“l(fā)i:last-child{樣式}”；3、用“l(fā)i:nth-of-type(N){樣式代碼}”給第N個(gè)li加樣式；4、用“l(fā)i:nth-child(N){樣式代碼}”給第N個(gè)li加樣式。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css選取指定第幾個(gè)li并加樣式

方法1：使用:first-child選擇器給第1個(gè)li加樣式

:first-child 選擇器匹配其父元素中的第一個(gè)子元素。

	
		
		
	

	
		
			
1
			
2
			
3
			
4
			
5
		
	

方法2：使用:last-child選擇器給最后1個(gè)li加樣式

:last-child選擇器用來(lái)匹配父元素中最后一個(gè)子元素。

li:last-child{
	background:pink;
}

方法3：使用:nth-of-type()選擇器給第N個(gè)li加樣式

:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素

li:nth-of-type(1){  /* 第1個(gè)li加樣式 */
	background:red;
}
li:nth-of-type(2){  /* 第2個(gè)li加樣式 */
	background:pink;
}
li:nth-of-type(3){  /* 第3個(gè)li加樣式 */
	background:green;
}

()內(nèi)的參數(shù)可以是公式或關(guān)鍵字Odd（奇數(shù)） 和 even（偶數(shù)）

n+2從第2個(gè)元素開(kāi)始加樣式。

li:nth-of-type(n+2){
	background:red;
}

同理如果選中單數(shù)元素那么就是2n+1（或者使用odd）；如果是想選中雙數(shù)元素，那么就應(yīng)該寫成2n+2（或者使用even）；

li:nth-of-type(2n+1){
background:pink;
}
li:nth-of-type(even){
background:green;
}

方法4：使用:nth-child()選擇器給第N個(gè)li加樣式

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。

li:nth-child(1){  /* 第1個(gè)li加樣式 */
	background:red;
}
li:nth-child(3){  /* 第3個(gè)li加樣式 */
	background:pink;
}
li:nth-child(5){  /* 第5個(gè)li加樣式 */
	background:green;
}

()內(nèi)的參數(shù)可以是公式或關(guān)鍵字Odd（奇數(shù)） 和 even（偶數(shù)）

li:nth-child(odd){ 
	background:red;
}
li:nth-child(2n+2){
background:pink;
}

“css如何給指定第幾個(gè)li加樣式”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

名稱欄目：css如何給指定第幾個(gè)li加樣式
網(wǎng)站URL：http://fisionsoft.com.cn/article/poehjc.html