先來說說為什麼要寫這一篇好了！主要原因就是我知道有＋、＞、～這幾個CSS選擇器可以使用，但是每次要使用的時候，都會忘記他們到底誰是誰，所以就想說趁這次好好記下他們各自的身分了。雖然說真正在切版時，並沒有常常使用到這三個孩子，但偶爾還是會有需要派他們出場的時候。好啦！廢話不多說，直接來看看這些CSS選擇器到底誰是誰！
加號、連接號、大於符號選擇器的用法
加號 +
選擇「位在同一層跟在後面的第一個元素」(選擇一個跟在後方的兄弟姊妹)
範例
(在看到最後的結果之前，可以先思考一下最後的結果會變成怎樣)
HTML的部分
CSS的部分
最後呈現的結果：只有緊接在span後面的那一個ｐ被改成紅字。
連接號 ~
選擇「位在同一層的所有符合指定名字的元素」(選擇所有符合指定名字的兄弟姊妹)
範例
(在看到最後的結果之前，可以先思考一下最後的結果會變成怎樣)
HTML的部分
CSS的部分
最後呈現的結果：所有在span後面的ｐ全部被改成紅字。
大於符號 >
選擇「位在下一層”內”所有符合指定名字的元素」(所有所有符合指定名字的兒子，不會選到孫子輩)
範例
(在看到最後的結果之前，可以先思考一下最後的結果會變成怎樣)
HTML的部分
CSS的部分
最後呈現的結果：所有在div底下第一層裡面的ｐ全部被變成綠字，但是div底下span裡面的p沒有受到影響。
其他比較
連結號 ~ vs. 大於符號 >
看了前面的內容後，不知道有沒有人發現連結號~跟大於符號>有點相像呢？來仔細比較看看吧！
範例
HTML的部分
CSS的部分
最後呈現的結果：寫法不同，但兩種方式選到的元素都一樣。
兩者的差異點：>是從父層往下找目標，~是從子層找目標。
空格 vs. 大於符號 >
還有一個也很相似的選取器，就是空格。空格和＞一樣是從父層開始往下找子層，找的概念也有點類似，但實際上還是有一點點差異。這邊也透過範例來實際比較一下！
範例
HTML的部分
CSS的部分
最後呈現的結果：寫法很相似，概念也很相似，但是空格的寫法，卻會選到孫子層。
兩者的差異點：使用>只會選到兒子層，空格則是會選到孫子層。
以上就是這次的小筆記，自己寫完和實際比較後，對於這三個選擇器的理解也變得更清楚了。
好啦！今天就到這裡囉，寫些打家，打家掰掰！
