CSS E:first-child

admin發表於2018-11-27
CSS

E:first-child是偽類選擇器，用於匹配父元素中第一位且型別為E的子元素。

通常，CSS選擇器都是非常容易理解的，從名稱大致可以猜測功能。

比如E:focus選擇器匹配獲取焦點的元素，出現歧義的可能性很小。

但是對於E:first-child等類似選擇器非常容易出現理解偏差。

主要有如下兩種錯誤理解：

（1）.匹配E元素下第一個子元素。

（2）.匹配E元素的父元素下的第一個子元素。

記住上述兩個理解錯誤，下面將通過程式碼例項一一破解。

E:first-child選擇器可以分解成三部分：

（1）.E：用於限定元素的型別。

（2）.first：用於限定元素所處的位置。

（3）.child：用於限定元素所處的層級，通俗的講就是輩分。

於是可以得出，被匹配元素需要滿足如下兩個條件：

（1）.元素型別為E。

（2）.且是父元素的第一個子元素。

特別說明：E並不僅表示型別選擇器，還可以是其他CSS選擇器。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:first-child{ Rule }

瀏覽器支援：

（1）.IE瀏覽器支援此選擇器。

（2）.edge瀏覽器支援此選擇器。

（3）.谷歌瀏覽器支援此選擇器。

（4）.火狐瀏覽器支援此選擇器。

（5）.opera瀏覽器支援此選擇器。

（6）.safria瀏覽器支援此選擇器。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
li:first-child{
  color:blue;
}
</style>
</head>
<body>
  <ul>
    <li>螞蟻部落一</li>
    <li>螞蟻部落二</li>
    <li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
  </ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/27/125134g7pxkh48k9984rz9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼可以將ul下第一個li元素字型顏色設定為藍色。

被匹配元素需要滿足如下幾個條件：

（1）.必須是li元素。

（2）.此li元素必須處於它父元素中的首位。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.a:first-child{
  color:blue;
}
</style>
</head>
<body>
  <ul>
    <li class="a">螞蟻部落一</li>
    <li class="a">螞蟻部落二</li>
    <li class="a">螞蟻部落三</li>
    <li class="a">螞蟻部落四</li>
  </ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/27/125159capaxhdooypn1w1v.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼就是為了說明E並非必須是元素選擇器，也可以是其他選擇器。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
a{display:block}
div:first-child{
  color:blue;
}
</style>
</head>
<body>
<div>
  <a>螞蟻部落一</a>
  <a>螞蟻部落二</a>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/27/125225qiucwuxdwucunuxz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼破解第一個誤解"匹配E元素下第一個子元素"。

按照錯誤理論，上述程式碼會匹配div下第一個連結a元素，那麼只有"螞蟻部落一"被設定為藍色。

事實是，匹配body下第一個div元素，並將其字型顏色設定為藍色，由於繼承性，所有文字都設定為藍色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.a:first-child{
  color:blue;
}
</style>
</head>
<body>
  <ul>
    <li class="b">螞蟻部落一</li>
    <li class="a">螞蟻部落二</li>
    <li class="a">螞蟻部落三</li>
    <li class="a">螞蟻部落四</li>
  </ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/27/125253qtncp965ug1mo64g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼破解第二個誤解"匹配E元素的父元素下的第一個子元素"。

任何一個li元素字型顏色都沒有被設定為藍色，匹配失敗。

原因分析如下：

（1）.被匹配元素必須是class屬性值為"a"或者含有"a"的元素。

（2）.同時，滿足第一個條件的元素，還必須處於它所在父元素的第一位。

（3）.但是處於ul元素第一位的元素的class屬性值為"b"。

由此可見，匹配的是E元素的父元素下的第一個子元素且元素型別為E。

相關文章