CSS3選取器中only-child與only-of-type的執行個體詳解

only-child選取器

“:only-child”選取器選擇的是父元素中只有一個子項目，而且只有唯一的一個子項目。也就是說，匹配的元素的父元素中僅有一個子項目，而且是一個唯一的子項目。

樣本示範

通過“:only-child”選取器，來控制僅有一個子項目的背景樣式，為了更好的理解，我們這個樣本通過對比的方式來向大家示範。

HTML代碼：

<p class="post">  <p>我是一個段落</p>  <p>我是一個段落</p></p><p class="post">  <p>我是一個段落</p></p>

CSS代碼：

.post p {  background: green;  color: #fff;  padding: 10px;}.post p:only-child {  background: orange;}

示範結果：

only-of-type選取器

“:only-of-type”選取器用來選擇一個元素是它的父元素的唯一一個相同類型的子項目。這樣說或許不太好理解，換一種說法。“:only-of-type”是表示一個元素他有很多個子項目，而其中只有一種類型的子項目是唯一的，使用“:only-of-type”選取器就可以選中這個元素中的唯一一個類型子項目。

樣本示範

通過“:only-of-type”選取器來修改容器中僅有一個p元素的背景色為橙色。

HTML代碼：

<p class="wrapper">  <p>我是一個段落</p>  <p>我是一個段落</p>  <p>我是一個段落</p>  <p>我是一個p元素</p></p><p class="wrapper">  <p>我是一個p</p>  <ul>    <li>我是一個清單項目</li>  </ul>  <p>我是一個段落</p></p>

CSS代碼：

.wrapper > p:only-of-type {  background: orange;}

示範結果：