本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 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 獨子選取器 - 這是啥媽寶選取器,如果文中描述有誤歡迎各位前輩不吝指正,各位金魚我們明天見~
Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學