iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
5

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 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 獨子選取器 - 這是啥媽寶選取器,如果文中描述有誤歡迎各位前輩不吝指正,各位金魚我們明天見~

金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
:first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器
下一篇
:only-of-type 類型獨子選取器
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言