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 規則中,selector 為 .my-css-rule
可找出網頁上含有 my-css-rule
類別的所有元素。
大括號內有三個宣告。
宣告是屬性和值的組合,會將樣式套用至與選取器相符的元素。
CSS 規則可以包含任意數量的宣告和選取器。
簡易選取器
最簡單明瞭的選取器群組都會指定 HTML 元素,再加上 類別、ID 以及其他可加入 HTML 標記的屬性。
通用選取器
通用選取器 (也稱為萬用字元) 會比對任何元素。
* {
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 中的常見模式,當中的特殊字元
或一組字元) 來定義選取器類型。
類別為 .my-class
的 HTML 元素仍會與上述 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
屬性的元素。
隨堂測驗
測試您對簡易選取器的瞭解程度
* {}
上述程式碼片段使用了哪種簡易選擇器?
div {}
上述程式碼片段使用了哪種簡易選擇器?
虛擬類別和虛擬元素
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。 這時複雜的選取器就能派上用場。
請特別留意,雖然下列選取器能提供我們更多功能 我們只能向下移植選取子元素 但無法指定向上或選取父項元素。 我們將介紹串聯資料及其運作方式 請見後續課程。
組合器
組合就是位於兩個選取器之間。
舉例來說,如果選取器是 p > strong
,組合器就是 >
字元。
透過選取器,您可依據這些合併工具在文件中的位置選取項目。
子系組合
想要瞭解子組合器 必須先瞭解父項和子項元素
<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
父項元素是含有文字的 <p>
。
其中 <p>
元素是 <strong>
元素,內容會變為粗體。
由於位於 <p>
中,因此屬於子項元素。
子系組合讓我們可以指定子元素。
這會使用空格 () 指示瀏覽器尋找子元素:
p strong {
color: blue;
}
這段程式碼選取了全部 <strong>
個元素
只有 <p>
元素的子項元素,使這些元素以遞迴方式呈現藍色。
這個效果在上例中更加清楚可見
使用組合選取器 .top div
。
該 CSS 規則會將左側邊框間距新增至這些 <div>
元素。
由於組合器具有週期性
.top
中的所有 <div>
元素都會套用相同的邊框間距。
查看這個示範中的 HTML 面板
看看 .top
元素如何包含多個 <div>
子項元素,以及這些元素本身
具有 <div>
子元素。
下一代組合器
您可以尋找緊接在另一個元素之後的元素
使用選取器中的 +
字元。
如要在堆疊元素之間新增間距,
使用下一個同層組合器以增加空間
「只有」當元素是 .top
子項元素的下一個同層時。
您可以在 .top
的所有子項元素中新增邊界。
,並使用下列選取器:
.top * {
margin-top: 1em;
}
這個問題之所以發生,是因為您選取的是 .top
的所有子元素。
這項規則可能會產生多餘的空間。
下一個同層組合器
混合使用通用選擇器
就能控制哪些元素能取得空格
同時將空間套用至任何元素。
這可讓您保有長期彈性
無論 .top
中顯示的 HTML 元素為何,都一樣。
後續 - 同層級組合者
後續的組合器與下一個同層級選取器非常相似。
而是不要使用 +
字元
使用 ~
字元。
差別在於元素只需要參照另一個父項具有相同父項的元素
而不要成為具有相同父項的下一個元素
後面的組合器會較缺乏彈性
這在上述範例時相當實用
在這個例子中,當自訂開關的相關核取方塊處於 :checked
狀態時,我們可以變更該開關的顏色。
子項組合器
子項組合器 (也稱為直接子母)
可讓您進一步掌控組合選擇器隨附的遞迴。
如果使用 >
字元,組合選取器就會「只」套用到直接子項。
以上一個同層級選取器範例為例。 空格會新增到每個下一個同層。 但如果其中一個元素同時具有做為子項的下一個同層元素, 可能會導致不必要的額外間距
為了緩解這個問題
變更下一個同層選取器,加入子組合:> * + *
。
這項規則現在「只會」套用到 .top
的直接子項。
複合選取器
您可以合併多個選取器,以提昇明確度和可讀性。
舉例來說,如要指定 <a>
元素
且具有 .my-class
的類別,請編寫下列內容:
a.my-class {
color: red;
}
系統不會為所有連結套用紅色
而且,它只會針對 <a>
元素套用紅色的 .my-class
。
詳情請參閱具體性模組。
隨堂測驗
測試您對複雜選取器的瞭解程度
下列哪一個符號「不是」選取器合併符號?
section.awesome { border: 1px solid hotpink; }
上述的選取器是...