CSS E:first-of-type

admin發表於2018-11-11

E:first-of-type是偽類選擇器,匹配父元素下E型別子元素集合中,處於同標籤型別第一位的元素。

概念分解如下:

(1).首先,元素必須是E型別,E是CSS選擇器。

(2).其次,元素必須處於同標籤型別元素集合的第一位。

特別說明:注意子元素與後代元素的區別。

選擇器的命名通常與其功能息息相關,選擇器中的type就是指的標籤型別。

功能與E:first-child選擇器類似,更多內容參閱如下兩篇文章:

(1).CSS E:first-child 選擇器一章節。

(2).E:first-of-type與E:first-child區別一章節。

語法結構:

[CSS] 純文字檢視 複製程式碼
E:first-of-type{ Rules }

引數解析:

(1).E:CSS選擇器。

(2).Rules:CSS具體規則宣告。

瀏覽器支援:

(1).IE9+瀏覽器支援此選擇器。

(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-of-type{
  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/11/164804d7gigomimo5mmccu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下:

(1).選擇器E是元素選擇器li,匹配到ul下所有li元素。

(2).li元素集合中的第一個li匹配成功。

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/11/164839a1k8969lnn3nf183.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

由此可見,p元素沒必要必須是其父元素的第一個子元素,只要其同型別元素的第一個即可。

再來分析一段程式碼例項:

[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-of-type{
  color:blue;
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落一</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/11/164917d5lzxy01l2cul9lx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

沒有任何一個li的字型顏色被設定為藍色,匹配失敗。

可能不少朋友誤以為第二個li元素字型顏色會被設定為藍色。

程式碼分析如下:

(1).class選擇器a匹配ul下後三個li元素。

(2).選擇器中type(標籤型別)限制作用得以體現,".a"選擇器匹配li型別元素,那麼最終的匹配元素必須同時是li元素集合中的第一位,第二個li元素僅是class屬性值為"a"的li元素集合的第一個,並不是li元素集合的第一個。

最後再來分析一段程式碼例項,加深一下理解:

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/11/164948hm07m371zs70ntk0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將第四個和第五個span元素字型顏色設定為藍色。

程式碼分析如下:

特別說明:為了陳述簡便,使用id屬性值指代對應元素。

(1).對於box元素,它具有三個子元素,兩個span元素和ant元素,類選擇器"a"可以匹配第二個span元素,但是此span元素的位置並未處於同級span元素集合的首位,所以匹配失敗。

(2).對於ant元素,它具有三個子元素,兩個div元素和一個span元素,類選擇器"a"可以匹配span元素,此元素雖然未處於同級元素的第一位,但是處於同級span元素的第一位(就它一個)。

(3).對於inner元素,它具有兩個span元素,類選擇器"a"可以匹配第一個span元素,此元素處於同級span元素集合的首位,匹配成功。