例子：

```css
.check:checked ~ .content {
}
```

`~` 選擇器實際上是後繼同胞組合器（在2017年之前稱為一般同胞組合器）：

後繼同胞組合器由“波浪號”（U+007E，`~`）字元組成，它將兩個簡單選擇器序列分隔開。由這兩個序列表示的元素在檔案樹中具有相同的父級，並且由第一個序列表示的元素位於由第二個序列表示的元素之前（不一定是緊隨其後）。

看下面這個例子：

```html
.a ~ .b {
  background-color: powderblue;
}
<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>
```

`.a ~ .b` 匹配第四和第五個列表項，因為它們：

- 是 .b 元素
- 是 .a 的同胞元素
- 在 HTML 原始碼中出現在 .a 的後面。

在 CSS 中，波浪號（~）是一種選擇器，用於選擇指定元素的同胞元素。波浪號選擇器通常用於根據特定關係選擇元素，例如選擇表單輸入後的錯誤訊息。

下面是一個具體的例子，假設我們有以下 HTML 程式碼：

```html
<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item important">Important Item 4</li>
  <li class="item">Item 5</li>
  <li class="item">Item 6</li>
</ul>
```

我們可以使用波浪號選擇器來選擇 "Important Item 4" 元素後的所有元素，如下所示：

```css
.important ~ .item {
  color: red;
}
```

在這個例子中，波浪號選擇器選擇了所有同胞元素，並將它們的顏色設定為紅色。這裡，".important" 是第一個元素，"~" 表示後面的 ".item" 是 ".important" 的同胞元素，因此所有同級別的 ".item" 都會被選擇，並將它們的顏色設定為紅色。

另一個常見的用法是選擇表單輸入後的錯誤訊息，例如：

```html
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<p class="error">Please enter your name</p>
```

使用以下 CSS 程式碼可以選擇與輸入欄位相鄰的錯誤訊息：

```css
input:focus ~ .error {
  display: block;
}
```

在這個例子中，當輸入欄位獲得焦點時，波浪號選擇器選擇了所有同胞元素，並將 ".error" 元素的顯示屬性設定為 block。因此，當輸入欄位獲得焦點時，相關的錯誤訊息將被顯示出來。

css 樣式檔案中的特殊符號 - 波浪號(也叫 tilde,squiggle,twiddle)

相關文章