css中first-child有什么作用

發(fā)布時(shí)間：2021-01-14 15:25:54 來源：億速云閱讀：419 作者：小新欄目：web開發(fā)

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

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

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

嗯，乍一看好像說的不是很明白，因此這個(gè)選擇器很容易讓人誤解，通常會(huì)有兩種誤解：

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

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

<!--誤解一-->
<style>
div:first-child{color: red;}
</style>

<div class="demo">
<a>一個(gè)鏈接</a>
<a>一個(gè)鏈接</a>
<a>一個(gè)鏈接</a>
<a>一個(gè)鏈接</a>
</div>

效果是這樣的：

css中first-child有什么作用

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

<!--誤解二-->
<style>
div a:first-child{color: red;}
</style>

<div class="demo">
<p>一個(gè)段落</p>
<a>一個(gè)鏈接</a>
<a>一個(gè)鏈接</a>
<a>一個(gè)鏈接</a>
<a>一個(gè)鏈接</a>
</div>

效果是這樣的：

css中first-child有什么作用

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

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			span:first-child {
				color: red;
			}
			/*p元素的父元素的第一個(gè)子元素是div而不是p元素，因此該樣式不起作用*/
			
			p:first-child {
				color: blue;
			}
			
			i:first-child {
				color: orange;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div>.demo的第一個(gè)子元素是div</div>
			<!--第一個(gè)span元素是它的父級(jí)P元素的第一個(gè)span，顏色變紅色-->
			<p><span>第一個(gè)span</span>第一個(gè)段落P<span>第二個(gè)span</span></p>
			<!--第一個(gè)i元素是它的父級(jí)a元素的第一個(gè)i，顏色變橙色-->
			<p>一個(gè)鏈接<i>第一個(gè)i元素</i></p>
			<!--第二個(gè)i元素是它的父級(jí)a元素的第一個(gè)i，顏色變橙色-->
			<p>一個(gè)鏈接<i>第二個(gè)i元素</i></p>
			<p>一個(gè)鏈接</p>
		</div>

	</body>

</html>

效果：

css中first-child有什么作用

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

向AI問一下細(xì)節(jié)

css中first-child有什么作用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽