# 1. +相鄰兄弟選擇器
### 可以理解為
- 我是哥哥，有一群兄弟依序站在我後面時，我只打算選擇我旁邊的第一位弟弟。
- 我是哥哥，之後所有兄弟也都想當哥哥，那就都選，直到有別的人卡在中間才會停止

### 條件
- 同階層

### 題目

<ul>
  <div>One<div>
  <li>Two!</li>
  <li>Three</li>
</ul>

我在CSS做

div + li {
  color: red;
}

### 結果

結論
在CSS裡我用div + li就等於是我要選擇==同階層==裡，接續div後面的第一個li
- 我是哥哥，有一群兄弟依序站在我後面時，我只打算選擇我旁邊的第一位弟弟。

⬇️⬇️⬇️另一個案例⬇️⬇️⬇️

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

我在CSS做

li + li {
  color: red;
}

### result

結論
結果2.3都變紅了，這裡有點玄，讓我娓娓道來，我選li>One後面的li>Two，所以li>Two變紅。但是對於li>Two,li>Three是li>Two後面的第一個，所以才會接續紅下去
- 我是哥哥，之後所有兄弟也都想當哥哥，那就都選，直到有別的人卡在中間才會停止

---

# 2. ~一般兄弟選擇器
### 可以理解為
這個很好理解，在同一層中，只要有符合的元素都會被選上，白話文就是我要挑跟我同級的隊友，只要在這個大隊伍中跟我名稱依樣我就選你

### 條件
- 在同層級
- 指定選擇名稱

### 題目

<article>
  <span>This is not red because it appears before any paragraph.</span>
  <p>Here is a paragraph.</p>
  <code>Here is some code.</code>
  <span>
    This span is red because it appears after the paragraph, even though there
    are other nodes in between.
  </span>
  <p>Whatever it may be, keep smiling.</p>
  <h1>Dream big</h1>
  <span>
    Doesn't matter how many or what kind of nodes are in between, all spans from
    the same parent after a paragraph are red.
  </span>
</article>
<span>
  This span is not red because it doesn't share a parent with a paragraph.
</span>

在CSS我做

p ~ span {
  color: red;
}

### 結果

---

# >子代選擇器
假設我是爺爺 我想要選我底下的雙胞胎 就用>

以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：

CSS

使用空格的情況

.box p{ font-size:20px; color:#216AAD;}

使用大於符號的情況下

.box > p{font-size:20px; color: #216AAD; }