iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
7
Modern Web

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

:not() 否定選取器 - 一個搞排擠的選取器

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


not 如其字面意義就是否定的意思,而 :not() 選取器,就是一個排擠(不選取)非我族群的選取器,這個選取器在一開始推出的時候,其實 Amos 非常的不習慣,以往選取物件都是直接想到誰就選誰,從來不以排擠否定方式來選取物件,但是對於一些程式設計師來說,這樣的選取器反到他們覺得很順手,真是讓 Amos 感到汗顏阿。但是仔細想想之後,這個選取器的選取方式在某些特定需求時到也是挺方便的,讓 Amos 舉個例子來看看。

<form>
	<input type="text" id="user_name" class="input_text">
	<input type="password" id="user_password" class="input_text">
	<input type="submit" value="送出">
</form>

上面這份 HTML 中,如果我想要選取到按鈕以外的輸入框的話,我可能需要為前兩個 input 標籤添加 class 或者是使用屬性選取器來選,就像下面這幾種方式

/*選取方式一*/
[type="text"],
[type="password"]{ ...略 }

/*選取方式二*/
.input_text{ ...略 }

/*選取方式三*/
#user_name,
#user_password{ ...略 }

但是如果這兩個 input 都沒有 class 的話該怎麼辦? 我們是否有更簡單的選取方式? 這時否定選取器就派上用場了,我們可以利用否定選取器,去選取「type="submit"」 以外的 input 標籤,像是下面這一段語法

input:not( [type="submit"] ){ ...略 }

學 :not() 選取器要腦袋轉一下

前面那段 CSS 語法,結合了否定選取器以及屬性選取器順便搭配了組合式選取語法, Amos 來解釋一下,該語法翻成白話文的話就是「我要選到 input 標籤,但我不要選到 submit 物件」,來看看下方中文解釋,為了讓大家比較容易對照, Amos 特別多加了空白讓版面比較容易比對,正式撰寫時請自動忽略

要選取的物件:不要選取到的(   要排除的條件   )      { ...略 }
input      :not        ( [type="submit"] )     { ...略 }

上方這樣應該很清楚了,但一定會有人覺得這樣很脫褲子放屁阿,用一個 class 就能夠搞定的事情,為什麼要弄的這麼複雜啦! 恩......老實說....我也覺得(被打)。

你想不到應用的地方是你的問題

這標題下的也太重了....嗎!? 其實 CSS 很多選取器都是為了需求被規劃出來的,所以你用不到不代表別人用不到喔,反倒是應該轉個思維去思考,這個選取器會被規畫並制定出來,究竟是在甚麼情境下有這需求呢? 恩......老實說....我也不知道(再次被打)!

其實在應用上面這個選取器需要轉個彎去思考,或者說你需要多遇到一些不同的情況才能更加理解與熟練,下面 Amos 再分享幾個例子來給各位金魚轉轉腦

選取第一個以外的項目

麵包屑 這種頁面項目,我們經常會在每個項目之間放上區隔用的符號,這時我們就會需要用到排除第一個項目的狀況,在以往的選取方式中,我都會使用 [親代選取器之妹妹選取器與鞭炮串選取器] 來作選取,但是如果換個寫法的話,我們可以改成以下寫法更直覺

li:not(:first-child){ ...略 }

上面語法中有個各位還沒學到的選取器,就是首項選取器 :first-child ,他的作用就是選到第一個項目,所以綜合整段語法的意思就是「我要選到 li 標籤,但是不要選到第一個 li」,這樣的意思可能比起使用加號選取器更加的明確。

選取站外連結的超連結

如果我的部落格文章中,有些文章是連結到站外,而我希望針對這些站外連結添加個說明文字,告知閱覽者這些連結會連結到站外的話,但是因為站外連結的網址可能有各式各樣的開頭,所以我可以轉個彎來這樣思考「我要選到超連結,但是不要選到連到我自家網址的」,這樣的規則就可以讓我寫出下方這樣的選取器了

a:not([href*="csscoke.com" i]){ ...略 }

上面這段語法中如果金魚對i 有疑問的話,建議你去看一下 CSS 屬性選取器 - 一個選取自由度超高的選取器 ,裡面會有詳盡的說明。

選取沒有加註 alt 資訊的圖片

對於 SEO 來說,添加圖片的 alt 屬性是個基本的需求,所以如果希望快速抓出這些圖片並加上醒目的提示的話,像是某些小編不小心粗心大意沒加到,圖片就會出現大紅框來提示小編,多麼貼心的服務阿,且程式設計師就完全不需要增加一個功能了,程式設計師會非常感謝你幫他省時間的,所以我們添加以下選取器就能搞定了

img{
    border: 10px solid red;
}
img:not([alt=""]){
    border: none;
}

把不是特定 class 的項目隱藏

有時候阿,畫面中的物件太多了,這時候我們就會想要選取到某些特定項目,但是其他的就隱藏就好,這種情境很特殊,但也可能會不小心遇到,所以以下 HTML 中, Amos 想要選取到 handsome_amos 的項目

<ul>
	<li class="handsome_amos">Handsome Amos photo</li>
	<li class="kevin">kevin</li>
	<li class="gigi">gigi</li>
	<li class="handsome_amos">Handsome Amos photo</li>
	<li class="cherry">cherry</li>
</ul>

CSS 我們就可以這樣寫,把那些不帥的都隱藏掉

li:not(.handsome_amos){ 
	display: none;
}

看到了吧! 這樣就全部剩下 .handsome_amos 了,世界都是 .handsome_amos 的了!!! (被狂打! )

(從地上爬起,扶正眼鏡) 是的! 以上就是排擠選取器否定選取器的使用方式, Amos 僅舉出一個小小的應用,希望各位喜歡啦

以上就是今天的 金魚都能懂的 CSS 選取器 - :not() 否定選取器 - 一個搞排擠的選取器,如果文中描述有誤歡迎各位前輩不吝指正,各位金魚我們明天見~

金魚都能懂的教學系列

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

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

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

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


上一篇
:empty 空值選取器 - 比谷關的空氣更乾淨的選取器
下一篇
:first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2019-12-04 10:22:35

.handsome_amos ..... not .... /images/emoticon/emoticon19.gif

我要留言

立即登入留言