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;
}

示範結果：

以上是CSS3選擇器中only-child與only-of-type的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！