CSS E:only-of-type

admin發表於2018-11-06
CSS

E:only-of-type是一個偽類選擇器。

此選擇器可以匹配父元素下唯一存在的E型別子元素。

上述概念陳述有點拗口，分解如下：

（1）.首先，要匹配的元素必須是E型別。

（2）.其次，此E型別元素必須在父元素下只能存在一個。

語法結構：

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

瀏覽器支援:

（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:only-of-type{
  color:blue;
}
</style>
</head>
<body>
  <ul>
    <li>螞蟻部落一</li>
  </ul>
  <ul>
    <li>螞蟻部落二</li>
    <li>螞蟻部落二</li>
  </ul>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/103936qyryfsyieoo5yvya.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以將第一個ul中的li元素字型顏色設定為藍色。

這是因為li元素在ul中唯一的，所以匹配成功。

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/104130thrkook7uhuw5no3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特別說明：為了演示方便，暫時不考慮標籤巢狀是否符合規範。

雖然ul中的子元素不是唯一的，但是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:only-of-type{
  color:blue;
}
</style>
</head>
<body>
  <ul>
    <li>螞蟻部落一</li>
    <p class="a">螞蟻部落二</p>
  </ul>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/104205zhv8hhd7d8zi7d9l.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由於class屬性值為"a"的元素在ul中是唯一的。

所以可以將p元素的字型顏色設定為藍色。

相關文章