CSS組合選擇器:5個選擇器符號功用介紹

CSS組合選擇器:5個選擇器符號功用介紹

最後更新時間: 2021 年 8 月 16 日

CSS選擇器,是讓你設計的樣式可以套用到HTML上的重要工具,瞭解選擇器中的逗號、空格、加號等符號能讓你更加靈活運用選擇器。

選擇器的存在,就好像讓HTML與CSS檔案由原本兩個不同頻率的人,在選擇器的協助下得以到同一個頻道上,彼此溝通,相互合作。讓HTML中的標籤知道去CSS檔案中的哪個地方套取樣式 ; CSS檔案檔案中的樣式,也知道樣式們要各自放到哪個HTML標籤去。

當你學會基本的元素選擇器(element selector)、類別選擇器(class selector)、ID選擇器(ID selector),準備一展身手,好好的運用CSS在網頁上時,你可能會發現,咦,選擇器怎麼好像有點複雜,那些逗號、空格及其它讓人困惑的符號是怎麼一回事?

就讓本文為你解惑,帶你一探CSS選擇器中的逗號空格、>、~、+符號功用,還有怎麼閱讀選擇器可以讓你不再迷失在選擇器大海中。

延伸閱讀:4個步驟認識CSS基礎操作與選擇器

逗號,樣式相同時的收納工具

當你看到元素選擇器(或稱標籤選擇器)中,有逗號出現,你可以想成有多個元素選擇器,都要採用相同的樣式,逗號就像是收納的工具,讓他們可以放在一起,套用一樣的樣式。

例如下方的選擇器,h1h2h3三個標籤中的內容都要是橘色字:

h1, h2, h3{  
  color: orange;   
}

See the Pen CSS selector commas by Ory (@SLSuccess) on CodePen.

你也可以選擇不要逗號,分別製作h1、h2、h3三個選擇器,像下方原始碼這樣,也可以達到相同的效果。

h1{  
  color: orange;   
}

h2{  
  color: orange;   
}

h3{  
  color: orange;   
}

逗號也可以用在其他選擇器上,例如類別選擇器,假如有三個類別選擇器.yes .yeah .ya都要橘色字,一樣可以使用逗號將他們收納在一起:

.yes, .yeah, .ya{
  color:orange;
}

See the Pen class selector comma by Ory (@SLSuccess) on CodePen.

逗號就好比把同樣的樣式收納在一起,以利CSS編寫及管理,當樣式相同時,你可以用逗號來收納。延續前面的例子,同樣都是要讓文字變橘色,元素選擇器與類別選擇器也可以逗號相隔,作為選擇器的一種寫法。

組合選擇器中的空格,同一個家族才獲選

生活中,我們在傳遞文字訊息時,可能會以空格來取代逗號,讓一大段文字比較容易閱讀;但在CSS中,空格是有功能在的,並非用於提高閱讀的舒適度。

空格讓選擇器可以用更多的條件來篩選目標,作為辨別在什麼情況下,HTML標籤才可以套用到這個樣式的把關者。

讓我們簡單運用divp標籤來說明:

See the Pen CSS descendant by Ory (@SLSuccess) on CodePen.

使用下方的選擇器,替位處div標籤內的p標籤上色,讓文字變為橘色,不在div標籤內的p標籤則維持系統預設的黑色。

div p{
  color:orange;
}

例子中,div p選擇器要選擇的目標是p標籤,只是必須是div標籤內的p標籤,換言之,p標籤的文字想要變成橘色,必須是在div家族中,不在div家族中的p標籤就無法套用橘色文字的樣式了。

當你看到選擇器內有空格,請從右邊開始閱讀,來瞭解這個選擇器,要選取的HTML標籤是什麼。接下來要介紹的選擇器內的各式符號,一樣從右邊開始讀起,先知道選擇的目標為何,再依序往左看,確認還需要符合那些條件,才會套用到特定的樣式。

>,必須是親生的才可以

選擇器中的空格,要求目標必須在某個家族內,才會獲選,> 符號則讓條件更嚴格了些,目標必須是直系後代,親生子女才可以,也就是說,必須剛好就在下一層,才會獲選。

來看個例子,實際了解一下:

See the Pen CSS Descendant by Ory (@SLSuccess) on CodePen.

例子中使用的選擇器:

div  p{
  color:orange;
}
div > p{
  background-color:blue;
}

例子中,div p選擇器的選擇目標,是只要p標籤在div標籤的內層,都會呈現橘色文字,但div > p選擇器的要求比較嚴格,只有在div下一層的p標籤才可以有藍色的底色,不可以是下兩層,也不可以是下三層,只能剛剛好的一層。

也許你可以把>符號想成臍帶,必須要是直屬的後代,兩者間是有其臍帶相連的直系親屬,才符合選擇器的要求,也才會讓選擇器中的樣式套用到網頁上。

選擇器中的空格與 >,是上下階層的表示,空格代表是只要在層級內的都可以被選到,> 符號則比較嚴格,只涵蓋到下一層。

內含空格的選擇器,原文為Descendant Selector,翻譯為後代選擇器,只要是在指定的層級之下,都會套用該樣式,無論是子女、孫子都可以;而含有> 符號的選擇器,原文是Child Selector,翻譯為子選擇器,強調要剛好在下一層才可套用樣式,只能是子女,孫子、曾孫等都不行。

介紹完「後代選擇器」與「子選擇器」,此時,你已經知道如何在選擇器中設置上下層級的條件,接下來,再來看看 ~+ 這兩個符號,瞭解如何在選擇器中,設置一個選取相同層級目標的條件。我們將使用兄弟姊妹的概念來比喻,取其同輩的意涵,來探究 ~+ 這兩個符號在選擇器中的意思。

~,弟弟妹妹們都獲選

~+ 這兩個符號都是目標都在選取同一個層級的HTML標籤,同一個層級是什麼意思?

HTML標籤可以一層一層的包覆,例如一個div標籤中,你可以再放入p標籤、a標籤,此時,<p><a>兩個標籤便在同一個層級,包覆這個兩個標籤的<div>則在他們的上一個層級,以親子的關係來比喻的話, <div> 是爸媽, <p><a> 則是子女,同時 <p><a> 也是兄弟姊妹,先出現的 <p> 排行在前面,是哥哥或姊姊,後出現的<a>則是弟弟或妹妹。

稍微瞭解一下層級後,我們來看看,選擇器中的 ~ 符號,設置了什麼條件,用於選擇什麼樣的目標。

div ~ p{
  color:orange;
}

See the Pen CSS Adjacent Sibling by Ory (@SLSuccess) on CodePen.

從例子中可以看到,含有~號的選擇器找的目標仍然是最右邊的p標籤,但 ~ 代表的條件是,你必須是div標籤的弟弟或妹妹才會套用樣式,也就是必須是在div 標籤後出現的同階層p 標籤 ,才會套用這個選擇器內的樣式。

+,只能選大弟、大妹

+ 這個符號,也是選取同階層的目標,只是目標更限縮了,不是弟弟妹妹都行,而是排行剛好就在其後的大弟或大妹才擁有套用樣式的資格。

div + p{
  color:orange;
}

See the Pen CSS adjacent sibling selector by Ory (@SLSuccess) on CodePen.

相連的時候,所有資格都要符合

前面說明了空格、>、~、+這4種設定選擇條件的方式,還有一種條件設定也是很常見的,在沒有符號的情況下,當選擇的條件連在一起,代表全部的條件都要符合,樣式才會被套用。

我們來設定一個需要同時符合兩個條件的選擇器。

設定一個選擇器,要求同時擁有good及nice兩個類別值,才會有橘色文字的樣式。注意到了嗎? .good.nice中間沒有空格或其他符號,他們連在一起。

.good.nice{
  color:orange;
}

下方的例子中,有兩個p標籤所構成的段落文字,其中一個帶有1個good類別,另一個帶有good及nice這兩個類別,結果同時具備 good及nice 類別的段落文字,套用到橘色文字了,只擁有good類別的則沒有套用到樣式。

See the Pen CSS selector by Ory (@SLSuccess) on CodePen.

以上就是CSS組合選擇器中的逗號空格、>、~、+符號功用的說明,CSS選擇器是套用樣式不可或缺的重要工具,如果網頁設計的越複雜,要求的樣式更細緻,便會需要更精準的選擇器,希望本文對於選擇器中的符號相關說明,可以讓學習CSS朋友,更熟悉選擇器的操作與運用。

延伸閱讀:

4個步驟認識CSS基礎操作與選擇器

Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構

15個常用的HTML標籤與屬性基本介紹

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *