:only-child 獨子選取器 - 這是啥媽寶選取器 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 24

Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列第 24 篇

:only-child 獨子選取器 - 這是啥媽寶選取器

11th鐵人賽 css教學 css 網頁教學金魚

CSScoke

2019-10-09 23:11:14

4429 瀏覽

分享至

本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

:only-child 獨子選取器，簡單的說就是選取到那個只有唯一一個子層的子物件，注意! 他是選取倒獨子物件，不是選取父層喔。而這個選取器也很容易跟另外一個 :only-of-type 選取器讓人誤會，如果你有看前面的金魚系列的話，應該可以知道只要看到 child 這個字就是看順序不看類型，而 :only-child 就是單純只看數量的一個選取器。

獨子的概念

讓我們看看獨子的概念，以下 HTML 範例中每個 .wrap 內都有 <span> 標籤，但是數量不同，我們想要選取到只有一個 span 標籤的區塊中的 span，那我們可以用以下的 CSS 來處理

 <div class="wrap">
    <span>span1</span>
  </div>
  <div class="wrap">
    <span>span1</span>
    <span>span2</span>
  </div>
  <div class="wrap">
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
  </div>

CSS

.wrap :only-child{
  background: red
}

上面的例子中，會有作用的只有第一個 wrap 內的 span 標籤，因為該 span 標籤是唯一一個子物件。

到底可用在哪裡

目前在專案中， Amos 其實沒有甚麼機會用到，就醬子...(喂! 這樣也太沒誠意，這樣還敢下一個大標)。這樣說好了，就目前在專案中，可想見的應用情境大概會是那種動態資料區域了，例如某些文章內容頁面，或者是其他可能會經由程式動態抓取資料的區域，這都可以用的上喔。讓我們來試想一個情境......(開始幻想...)

今天我有一個文章頁面，內容是有小編來撰寫的，可是小編不是天天都能像 Amos 這麼會講廢話，還廢話特多的，所以有時候可能會有那種只有一段文字的狀況出現，像是「作者外出取財」啦，「今日貴客富堅來訪休刊一日」啦，這樣你的畫面可能就會很空洞，我們就能利用這樣的選取器幫這種空洞的畫面添加一些元素來美化，立刻來看看原始碼吧。

HTML

<article>
	<p>今日貴客富堅來訪，故休刊一日</p>
<!-- 	<p>我是小編今天沒有打混喔，你可以把這段註解掉看看</p> -->
</article>

CSS

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
p{
	font-family: 'Noto Sans TC', sans-serif;
}
article p:only-child{
  font-size: 62px;
  text-align: center;
	padding: 100px 50px;
	margin: 50px auto;
	width: 80%;
	background-color: ##f6f6f4;
	border: 6px solid #fff;
	box-shadow: 0 0 20px #ccc;
	font-weight: 700;
}
article p:only-child:after{
  content:'老闆: 小編又偷懶了...';
  display: block;
  font-size: 16px;
  color: #aaa;
	margin-top: 50px;
	font-weight: 100;
}

上面這段例子(你可以狠狠點擊這邊看範例)中， Amos 特別讓這樣的空洞訊息加上了特大的文字，順便幫老闆吐槽了小編幾句，如果各位把 HTML 中第二個段落的註解拿掉的話，你會看到我們的文字就自動呈現正常的大小了，是不是很有趣又實用啊!

另外說個秘密，其實...... Amos 用article p:first-child:last-child 就能做到這相同的效果了，:on-child 頂多就是省下一些字跟語意更明確而已，這感覺也太尷尬啦~~~

以上就是今天的金魚都能懂的 CSS 選取器 - :only-child 獨子選取器 - 這是啥媽寶選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～