---
# System prepended metadata

title: 'W_+, ~, > 是什麼#'
tags: [CSS]

---

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

### 條件
- 同階層


### 題目
```
<ul>
  <div>One<div>
  <li>Two!</li>
  <li>Three</li>
</ul>
```
我在CSS做
```
div + li {
  color: red;
}
```
### 結果
![image](https://hackmd.io/_uploads/HkgjL4D9T.png)

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


⬇️⬇️⬇️另一個案例⬇️⬇️⬇️
```
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>
```
我在CSS做
```
li + li {
  color: red;
}
```
### result
![image](https://hackmd.io/_uploads/S1yzDVvcT.png)

結論
結果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;
}
```
### 結果
![image](https://hackmd.io/_uploads/S11I5Nv9p.png)

---

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

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

CSS
![image](https://hackmd.io/_uploads/Bk4q6Kv9T.png)


使用空格的情況

.box p{ font-size:20px; color:#216AAD;}
![image](https://hackmd.io/_uploads/ByCdaKP9p.png)



 

使用大於符號的情況下

.box > p{font-size:20px; color: #216AAD; }
![image](https://hackmd.io/_uploads/BJIiaYv5T.png)



