iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
7

談完了 CSS 群組式宣告,接下就來談組合式宣告了,組合式宣告的方式基本上就是將多個選取方式合起來一起寫的作法,例如你有個物件同時是 <p> 標籤,而且他同時擁有 ID 以及 class 名稱,就像下面這樣

<p class="amos" id="handsome">...內文略</p>

這時候不管你的 CSS 選取器是寫 p 或者是 .amos 又或者是 #handsome 選到的都是同一個目標對象,那我們也可以把它當作BBQ串成一串串燒樣的寫法,像是下面這樣

p.amos#handsome{ ...略 }

或下面這樣

p#handsome.amos{ ...略 }

請注意!每個選取器之間是沒有空格的!當你把 同一個目標對象 用該對象具備的多個選取器選取他的時候,就不該有空格,聽起來很囉唆嗎? 就讓我們繼續看下去。

舉個生活一點的例子

你跟小明小美是同一個班上的同學,然後特別的是你跟小明同時外號都相同,這時候可能會出現的狀況會是

姓名(內容文字) 學號(ID) 綽號 (class) 職務(tag)
Amos A001 帥哥 班長
小明 A002 帥哥 同學
小美 A003 美女 風紀

如果老師對著班上喊我要找帥哥,那就會出現 Amos 跟小明兩個人都應答的情況,但是老師明明要找的是帥哥 Amos,而不是帥哥小明啊,所以老師可以怎麼喊呢? 那當然是越詳細的把你想找的人的特徵都講出來就越不會找錯人啦! 所以應該是喊「學號是A001的帥哥班長」,這樣就絕對不會找錯人了,如果將老師喊的這一句話轉換成 CSS 的話,那麼你的選取器大概會長成這樣 班長#A001.帥哥班長.帥哥#A001 ,但切記班長千萬不可以出現在整串選取器的後面,不然就會變成是 ID 或 class了(因為跟在點號井號的後方)。

同樣的道理,在我們的網頁中也有可能會出現以下狀況:

<input type="button" class="btn" value="詳細內容">
<input type="button" value="詳細內容">

<a href="#" class="btn">詳細內容</a>
<a href="#">詳細內容</a>

<button class="btn">詳細內容</button>
<button>詳細內容</button>

上面是一個不同標籤套用著相同 class 名稱的一種狀況,此時我想要選取到 a 標籤且他同時具有 btn 這個 class 的話,你選標籤的話就會多選到第二個超連結,但是如果是選 .btn 這個 class 的話,又會選到其他我不想選到的對象,那這時就非常適合使用組合式宣告的方式了,我就把兩個選取器,也就是兩個條件寫出來,符合規則的自然就會被選取到了,所以我只需要寫 a.btn 就能選取到我要的目標對象了。

CSS 組合式宣告實務應用面

在實際的應用中,我們可以利用組合 CSS 選取器的方式來篩選出我們想要選取的對象,如果你的網頁在一開始架構就寫的不是非常妥善時,就是不管是哪個標籤都套用了相同的 class 名稱,這時候你要篩選就會變得異常困難,所以妥善的運用 CSS 組合式宣告,你可以更順利一點,當然截至目前 Amos 所講的選取器還是眾多選取器中的一小塊,可能你還無法體會到 CSS 組合式宣告的優點跟強大,但只要耐心跟著完這 30 天,我相信你的 CSS 選取器能力會大大的躍進的喔。 以下列出幾個實際應用面的需求,以及會使用到的寫法給各位參考

需求一: 我要讓超連結的外觀跟按鈕有所差異,但希望他們的尺寸佔位是一樣的

<button class="btn">放入願望清單</button>
<a class="btn">加入購物車</a>
<input class="btn" type="submit" value="送出">	
.btn{
	display: inline-block;
	border:1px solid #aaa;
	background-color: #eee;
	padding: 0 1em;
	line-height: 1.5em;
}
a.btn{
	background-color: transparent;
	border-color: transparent
}

需求二: 我要讓圖片文繞圖,但如果是 div 的話就不要文繞圖

.note{ border: 5px solid #fff; }
img.note{ float:right }

需求三: 我要選取同時擁有 .list-item 以及 .active 的物件(通常用在選單)

<ul class="list">
<li class="list-item active">文字</li>
<li class="list-item">文字</li>
<li class="list-item">文字</li>
<li class="list-item">文字</li>
</ul>
.list-item.active{ ...略 }

其實在實際應用面可能會有更多種狀況,實務層面要考量的還有 CSS 優先權的問題,這會是更重要的! 但礙於目前選取器講的還不夠多,所以僅列出幾種可能遇到的狀況,待後面選取器知道的更多之後,再來談談各式各樣的組合運用。

以上就是這次金魚都能懂的 CSS 選取器 - CSS 選取器的組合式宣告,不知道各位工作上面都用哪些方式,歡迎在下面留言分享給 Amos 喔。各位金魚我們明天見。

金魚都能懂的教學系列

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

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

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

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


上一篇
CSS 群組式宣告 - 每個開發者都該學會的選取方式
下一篇
CSS 層疊式宣告 - 讓你快速選到特定元素內的物件的選取器
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30

尚未有邦友留言

立即登入留言