舉例說明你對相鄰兄弟選擇器的理解

王铁柱6發表於2024-11-28

相鄰兄弟選擇器（Adjacent sibling combinator），用 + 表示，用於選擇緊接在指定元素後的第一個兄弟元素。 它要求兩個元素擁有相同的父元素，並且第二個元素必須緊跟在第一個元素之後，中間不能有任何其他元素，即使是空格或換行符也不行。

以下是一些例子：

1. 選中緊跟在 h2 元素後的第一個 p 元素：

<h2>標題</h2>
<p>段落1</p>
<p>段落2</p>
<div>其他內容</div>
<p>段落3</p>

<style>
h2 + p {
  color: red;
}
</style>

在這個例子中，只有“段落1”會變成紅色。 “段落2” 和 “段落3” 不會受到影響，因為它們都不是緊跟在 h2 後的第一個兄弟元素。“段落2”雖然是h2的兄弟元素，但它前面有“段落1”隔著。“段落3”前面有div隔著.

2. 列表樣式修改：

<ul>
  <li>專案1</li>
  <li>專案2</li>
  <li>專案3</li>
</ul>

<style>
li + li {
  margin-top: 10px; /* 為除了第一個列表項之外的所有列表項新增頂部邊距 */
}
</style>

這裡，只有“專案2”和“專案3”會有頂部外邊距。 “專案1” 不會有，因為它前面沒有兄弟元素。 這可以用來實現列表項之間的間距，而不會影響第一個列表項。

3. 表單樣式調整：

<form>
  <label for="username">使用者名稱:</label>
  <input type="text" id="username">
  <label for="password">密碼:</label>
  <input type="password" id="password">
</form>

<style>
label + input {
  margin-left: 5px; /* 為每個輸入框新增左邊距，使其與標籤稍微分開 */
}
</style>

這個例子中，兩個 input 元素都會獲得左邊距，因為它們都緊跟在一個 label 元素之後。

4. 無效選擇器示例:

<div>
  <h2>標題</h2>
  <p>段落1</p>
</div>
<p>段落2</p>

<style>
h2 + p {
  color: red;
}
</style>

這裡，只有div內的“段落1”會變成紅色。“段落2”不會變紅，因為它和h2雖然都是div的兄弟元素，但它們並不在同一個父元素下。h2的父元素是div，而p的父元素是body。

總結: 相鄰兄弟選擇器 + 必須滿足兩個條件：

  1. 相同的父元素: 兩個元素必須是兄弟元素，即擁有相同的父元素。
  2. 緊鄰: 第二個元素必須緊跟在第一個元素之後，中間不能有任何其他元素 (包括文字節點, 註釋等)。

希望以上例子能夠幫助你理解相鄰兄弟選擇器的用法。

相關文章