初學者指南:CSS 選擇器中的「+」號(相鄰兄弟選擇器)
更新日期: 2024 年 10 月 21 日
在學習 CSS 時,你可能會遇到需要針對某些特定元素進行樣式設置的情況。
例如,你希望只對某個元素的相鄰元素應用樣式,而不是該元素內的所有其他元素。
這時,相鄰兄弟選擇器(Adjacent Sibling Selector)就能派上用場。
相鄰兄弟選擇器是 CSS 中一個常用且實用的工具,通過它你可以精確選擇緊接著另一個元素後面的兄弟元素並應用樣式。
本文將為你介紹 CSS 中的 +
(相鄰兄弟選擇器)的作用、語法,以及實際應用範例。
什麼是相鄰兄弟選擇器?
相鄰兄弟選擇器 是用來選擇緊接在某個元素後面的兄弟元素。
這意味著,如果兩個元素是同一個父元素的子元素,並且一個元素緊跟在另一個元素之後,你可以使用 +
選擇這個緊接的兄弟元素。
相鄰兄弟選擇器的語法
A + B {
/* 樣式規則 */
}
A
:目標元素的前一個兄弟元素B
:緊接在A
後面的兄弟元素
只有當 B
是緊跟在 A
之後的同一層級元素時,B
才會被選擇。
鄰兄弟選擇器的使用範例
基本範例
假設你有兩個相鄰的 p
元素,你希望將第二個 p
元素的顏色設為藍色,但不影響其他 p
元素。
這時候你就可以使用相鄰兄弟選擇器。
p + p {
color: blue;
}
HTML 範例:
<p>這是第一個段落。</p>
<p>這是第二個段落,會變成藍色。</p>
在這裡,只有第二個 p
元素(緊跟在第一個 p
後面)會變成藍色。
與不同元素的搭配使用
相鄰兄弟選擇器不限於選擇相同類型的元素。你可以用它來選擇不同類型但相鄰的元素。例如,選擇緊接在 h1
標籤後面的 p
元素。
h1 + p {
color: red;
}
HTML 範例:
<h1>標題 1</h1>
<p>這是標題後的段落,會變成紅色。</p>
<p>這是另一個段落,不會變色。</p>
在這裡,只有第一個 p
元素會變成紅色,因為它緊跟在 h1
元素之後。
應用場景與實際用法
標題與段落的樣式設置
在網頁設計中,常見的需求之一是為某些特定位置的元素應用樣式。
比如說,當你想讓位於某個標題,之後的第一個段落具有不同的樣式,這時相鄰兄弟選擇器就非常有用。
h2 + p {
font-style: italic;
color: gray;
}
這樣的樣式設定可以用於強調某個標題後的第一段文字,使其樣式區別於其他段落。
HTML 範例:
<h2>這是一個標題</h2>
<p>這段文字會變成灰色並且斜體。</p>
<p>這段文字則不會受到影響。</p>
表單元素的樣式
假設你有一個表單,並且希望將緊跟在輸入框後面的 label
文字設置為粗體。
input + label {
font-weight: bold;
}
這樣可以確保 label
只會在與輸入框緊鄰時變成粗體,這對於表單的設計和排版非常有幫助。
HTML 範例:
<input type="checkbox" id="agree">
<label for="agree">我同意條款</label>
相鄰兄弟選擇器與其他選擇器的區別
與後代選擇器的區別
後代選擇器(A B
)是用來選擇某個元素中的所有後代元素,而不僅僅是緊接在某個元素後的兄弟元素。
因此,相鄰兄弟選擇器的範圍更加精確,只針對緊跟在另一個元素後面的兄弟元素。
範例:
/* 後代選擇器 */
div p {
color: green;
}
/* 相鄰兄弟選擇器 */
div + p {
color: blue;
}
在這裡,div p
會選擇 div
元素中的所有 p
元素,而 div + p
只會選擇緊接在 div
之後的 p
元素。
與一般兄弟選擇器的區別
CSS 中還有一個叫做一般兄弟選擇器的符號 ~
,它的作用是選擇某個元素後面的所有兄弟元素,而不僅僅是第一個。
h2 ~ p {
color: red;
}
這段代碼會選擇所有位於 h2
後面的 p
元素,而不僅僅是緊接的那個。
範例對比:
/* 相鄰兄弟選擇器 */
h2 + p {
color: blue;
}
/* 一般兄弟選擇器 */
h2 ~ p {
color: red;
}
這兩個選擇器的區別在於:h2 + p
只會選擇第一個 p
,而 h2 ~ p
會選擇 h2
後面的所有 p
元素。
注意事項
- 只能選擇緊鄰的兄弟元素:相鄰兄弟選擇器只能選擇緊跟在某個元素之後的兄弟元素。
如果中間隔了其他元素,則樣式不會被應用。 - 同層級限制:相鄰兄弟選擇器只能作用於同一個父元素的子元素,無法跨層級選擇元素。
結語
CSS 的相鄰兄弟選擇器 +
是一個簡單但強大的工具,能幫助你精確地選擇某個元素的下一個兄弟元素,並應用樣式。
這在設計頁面佈局、控制樣式應用範圍時非常有用。
理解並靈活運用相鄰兄弟選擇器,可以讓你的 CSS 代碼更加簡潔且具有可控性,尤其是當你需要精確控制某些相鄰元素的樣式時。
學會這一技巧後,你將能夠更加高效地管理你的 CSS,並應對複雜的樣式需求。