CSS Podcast - 002:選取器
如果您只想要放大部分文字,並為文章第一段顯示紅色,該怎麼做?
<article>
<p>I want to be red and larger than the other text.</p>
<p>I want to be normal sized and the default color.</p>
</article>
請使用 CSS 選取器找出該特定元素,並套用這樣的 CSS 規則。
article p:first-of-type {
color: red;
font-size: 1.5em;
}
CSS 提供許多選項,讓您選取元素並套用規則,大小從非常簡單到非常複雜,有助於解決這類情況。
CSS 規則的各個部分
如要瞭解選取器的運作方式和 CSS 在 CSS 中的角色,請務必瞭解 CSS 規則的各個部分。CSS 規則是程式碼區塊,包含一或多個選取器,以及一或多個宣告。
在這個 CSS 規則中,選取器為 .my-css-rule
,可找出頁面上具有 my-css-rule
類別的所有元素。大括號中有三個宣告。宣告是一種屬性和值組,可將樣式套用至選取器比對的元素。CSS 規則可以包含任意數量的宣告和選取器,
簡易選取器
最簡單明瞭的選取器群組會指定 HTML 元素,以及可加入 HTML 標記的類別、ID 和其他屬性。
通用選取器
* {
color: hotpink;
}
這項規則會導致網頁上的每個 HTML 元素都具有熱粉色文字。
類型選取器
類型選取器會直接比對 HTML 元素。
section {
padding: 2em;
}
這項規則會導致所有 <section>
元素在各邊的 2em
為 padding
。
類別選取器
HTML 元素的 class
屬性可定義一或多個項目。類別選取器符合已套用該類別的所有元素。
<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>
任何套用該類別的元素都會標上紅色:
.my-class {
color: red;
}
請注意,.
只會出現在 CSS 中,而「不是」HTML。這是因為 .
字元會指示 CSS 語言與類別屬性成員相符。這是 CSS 的常見模式,會使用特殊字元或一組字元來定義選取器類型。
即使 HTML 元素的類別為 .my-class
,仍會與上述 CSS 規則相符,即使這些元素有幾個其他類別,也會如下所示:
<div class="my-class another-class some-other-class"></div>
這是因為 CSS 會尋找「包含」定義類別的 class
屬性,而不是完全相符該類別。
ID 選取器
含有 id
屬性的 HTML 元素必須是網頁上該 ID 值的唯一元素。您可以使用 ID 選取器選取元素,如下所示:
#rad {
border: 1px solid blue;
}
這個 CSS 會將藍色邊框套用至 id
為 rad
的 HTML 元素,如下所示:
<div id="rad"></div>
與類別選取器 .
類似,使用 #
字元來指示 CSS 尋找與後面的 id
相符的元素。
屬性選取器
您可以使用屬性選取器,找出包含特定 HTML 屬性或 HTML 屬性特定值的元素。用方括號 ([ ]
) 包住選取器,指示 CSS 搜尋屬性。
[data-type='primary'] {
color: red;
}
這個 CSS 會尋找所有屬性為 data-type
且值為 primary
的元素,如下所示:
<div data-type="primary"></div>
如果不想尋找 data-type
的特定值,您也可以尋找具有屬性的元素 (無論其值為何)。
[data-type] {
color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>
這兩個 <div>
元素都會有紅色文字。
您可以在屬性選取器中加入 s
運算子,來使用區分大小寫的屬性選取器。
[data-type='primary' s] {
color: red;
}
也就是說,如果 HTML 元素的 data-type
是 Primary
,而不是 primary
,就無法取得紅色文字。您可以使用 i
運算子,執行相反詞 (不區分大小寫)。
除了大小寫運算子以外,您也可以使用運算子在屬性值中比對部分字串。
/* A href that contains "example.com" */
[href*='example.com'] {
color: red;
}
/* A href that starts with https */
[href^='https'] {
color: green;
}
/* A href that ends with .com */
[href$='.com'] {
color: blue;
}
分組選取器
選取器不一定要與單一元素相符。您可以將多個選取器以半形逗號隔開:
strong,
em,
.my-class,
[lang] {
color: red;
}
此範例將顏色變更延伸至 <strong>
元素和 <em>
元素。同時也擴充為名為 .my-class
的類別,以及包含 lang
屬性的元素。
隨堂測驗
測驗您對簡易選取器的相關知識
* {}
上述程式碼片段使用了哪種簡易選取器?
[]
是用於屬性的簡易選取器。#
是用於 ID 簡易選取器。*
是通用的簡易選取器。.
可用於類別的簡易選取器。div {}
上述程式碼片段使用了哪種簡易選取器?
.
可用於類別的簡易選取器。element
名稱用於 type 簡易選取器。[]
是用於 屬性 的簡易選取器。#
是用於 ID 簡易選取器。虛擬類別和虛擬元素
CSS 提供實用的選取器類型,著重於特定平台狀態,例如將遊標懸停在元素、元素「內部」,或元素的特定部分時。
虛擬課程
HTML 元素會因和互動,或其中一個子項元素處於特定狀態而出現不同的狀態。
舉例來說,使用者可以將滑鼠指標懸停在 HTML 元素上,或是使用者將子項元素懸停。在這種情況下,請使用 :hover
虛擬類別。
/* Our link is hovered */
a:hover {
outline: 1px dotted green;
}
/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
background: floralwhite;
}
詳情請參閱虛擬類別單元。
虛擬元素
虛擬元素與虛擬類別不同,因為前者並非回應平台狀態,而是使用 CSS 插入新元素。虛擬元素和虛擬類別的語法也不同,因為我們採用雙冒號 (:
),而不是使用單個冒號 (::
)。
.my-element::before {
content: 'Prefix - ';
}
如上文所述,您可以在連結標籤前方加上檔案類型的連結,可以使用 ::before
虛擬元素在元素開始處插入內容,或使用 ::after
虛擬元素在元素結尾插入內容。
但虛擬元素不僅限於插入內容。您也可以用來指定元素的特定部分。舉例來說,假設您有一份清單。使用 ::marker
即可設定清單內每個項目符號 (或編號) 的樣式
/* Your list will now either have red dots, or red numbers */
li::marker {
color: red;
}
您也可以使用 ::selection
設定使用者醒目顯示的內容樣式。
::selection {
background: black;
color: white;
}
詳情請參閱虛擬元素的模組。
隨堂測驗
測驗您對虛擬選取器的瞭解程度
虛擬元素選取器使用多少冒號?
:
用於指定虛擬類別。::
用於指定虛擬元素。p:hover { background: white; color: black; }
上述程式碼片段使用了哪種虛擬選取器?
:
用於指定虛擬類別。::
用於指定虛擬元素。複雜的選取器
您已經看過龐大的選取器陣列,但有時候,您需要使用 CSS 的精細控制。這樣一來,複雜的選取器就能派上用場。
在此提醒您,雖然下列選取器賦予我們的權力,但只能向下邊緣選取子元素。因此無法向上指定,並選取父項元素。 我們會在後續課程中說明 Cascade 和運作方式。
組合器
選取器位於兩個選取器之間。舉例來說,如果選取器是 p > strong
,組合器就是 >
字元。使用這些組合的選取器可協助您根據項目在文件中的位置選取項目。
子系組合
如要瞭解子系組合,您需要先瞭解父項和子項元素。
<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
父項元素是含有文字的 <p>
。在該 <p>
元素中是 <strong>
元素,讓內容以粗體顯示。由於它位於 <p>
內,因此為子元素。
子組合器可讓您指定子元素。這會使用空格 () 指示瀏覽器尋找子元素:
p strong {
color: blue;
}
此程式碼片段只會選取屬於 <p>
元素子項元素的所有 <strong>
元素,以遞迴方式呈現藍色。
在上述範例中使用組合器選取器 .top div
,會更清楚地看到這種效果。該 CSS 規則會為這些 <div>
元素加上左側邊框間距。由於組合器具有遞迴性,因此 .top
中的所有 <div>
元素都會套用相同的邊框間距。
請看這個示範中的 HTML 面板,瞭解 .top
元素本身如何包含數個 <div>
子元素,以及 <div>
子元素。
下一個同層級組合
您可以在選取器中使用 +
字元,找出緊接在另一個元素之後的元素。
如要在堆疊元素之間新增空間,「只有」在元素是 .top
子項元素的下一個同層級時,才能使用下一個同層級組合器來新增空間。
您可以使用下列選取器,為 .top
的所有子項元素新增邊界:
.top * {
margin-top: 1em;
}
這個問題是由於您選取了 .top
的所有子項元素,這項規則可能會產生多餘且不必要的空間。下一個同層級組合與「通用選取器」混合使用,您不僅可以控制哪些元素會取得空間,還能將空間套用至「任何元素」。如此一來,無論 .top
中顯示的 HTML 元素為何,您都能享有一定的長期彈性。
後續 - 同層級組合
後續的組合與下一個同層級選取器非常類似,但是,請使用 ~
字元,而不是 +
字元。不同之處在於,元素只需要跟後面具有相同父項的另一個元素,而不是具有相同父項的下一個元素。
這個後續的組合項較少,這在如上例所示情況中非常實用,在相關核取方塊處於 :checked
狀態時,我們會變更自訂切換鈕的顏色。
子項組合器
子項組合器 (又稱為直接子系) 可讓您進一步控管組合選取器隨附的遞迴性。使用 >
字元,就能限制組合器選取器,只套用到直接子項。
請參考下一個同層級選取器範例。每個下一個同層級都會新增空格,但若其中一個元素同樣具有下一個同層級元素做為子項,可能會導致不想要的額外間距。
如要解決這個問題,請變更「下一個同層級選取器」,以納入子項組合:> * + *
。這項規則現在「只會」套用到 .top
的直接子項。
複合選取器
您可以合併選取條件,提高明確性和可讀性。舉例來說,如要指定包含 .my-class
類別的 <a>
元素,請編寫以下內容:
a.my-class {
color: red;
}
這個做法不會為所有連結套用紅色,而且只會將紅色顏色套用至 .my-class
(位於 <a>
元素上)。if詳情請參閱具體性模組。
隨堂測驗
測驗您對複雜選取器的相關知識
下列哪一個符號「不是」選取器組合?
section.awesome { border: 1px solid hotpink; }
上方的選取器是...