真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

css中first-child有什么作用

這篇文章將為大家詳細(xì)講解有關(guān)css中first-child有什么作用,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

解放網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,解放網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為解放上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢,請找那個售后服務(wù)好的解放做網(wǎng)站的公司定做!

“:first-child”是css中的一個選擇器,其作用是用于匹配其父元素中的第一個子元素;其語法格式是“指定子元素:first-child{css代碼樣式}”。

:first-child 選擇器用于選取屬于其父元素的首個子元素的指定選擇器?!獁3school

嗯,乍一看好像說的不是很明白,因此這個選擇器很容易讓人誤解,通常會有兩種誤解:

  • 誤解一:認(rèn)為E:first-child選中E元素的第一個子元素。

  • 誤解二:認(rèn)為E:first-child選中E元素的父元素的第一個E元素。

你是不是也曾這樣理解這個選擇器或者現(xiàn)在仍然這樣理解?以上兩種理解都是錯誤的,為了證明上面兩種理解是錯的,看看下面的實(shí)例:





一個鏈接
一個鏈接
一個鏈接
一個鏈接

效果是這樣的:

css中first-child有什么作用

很明顯,照第一種理解,應(yīng)該只有第一個a元素字體顏色變紅,然而事實(shí)上全部變紅了。





一個段落

一個鏈接 一個鏈接 一個鏈接 一個鏈接

效果是這樣的:

css中first-child有什么作用

照第二種理解,div里的第一個a元素字體應(yīng)該是紅色的,事實(shí)證明這種理解也是錯的。

OK,正確的理解應(yīng)該是:只要E元素是它的父級的第一個子元素,就選中。它需要同時滿足兩個條件,一個是“第一個子元素”,另一個是“這個子元素剛好是E”。



	
		
		
			span:first-child {
				color: red;
			}
			/*p元素的父元素的第一個子元素是div而不是p元素,因此該樣式不起作用*/
			
			p:first-child {
				color: blue;
			}
			
			i:first-child {
				color: orange;
			}
		
	

	
		
			
.demo的第一個子元素是div

第一個span第一個段落P第二個span

一個鏈接第一個i元素

一個鏈接第二個i元素

一個鏈接

效果:

css中first-child有什么作用

關(guān)于“css中first-child有什么作用”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。


當(dāng)前題目:css中first-child有什么作用
網(wǎng)頁URL:http://weahome.cn/article/pecies.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部