這次我們要來了解CSS 選擇棄權重 & 關係選擇器
CSS 選擇棄權重是指不同 CSS 選擇器之間，哪一條規則會優先生效 的「重要性分數」。
就是當多個CSS規則同時套用到同一個元素時，決定哪一個樣式｢比較強」。
像是CSS:
p { color: blue; }
.text { color: red; }
#title { color: green; }
HTML是:
<p id="title" class="text">Hello</p>
會長像以下圖片，會先顯示綠色(因為ID的權重最高)
CSS 會依照選擇器的不同種類給不同分數：
選擇器種類 權重 舉例
行內樣式（Inline style） 1000 EX:<div style="color:red">
ID 選擇器 100 #header
Class / 偽類 / 屬性選擇器 10 .box, :hover, [type="text"]
標籤 / 偽元素 1 div, p, ::before
萬用選擇器 0 *
說白一點:inline style[<p style="">]> ID[#] > class/屬性/偽類[.] > 標籤/偽元素[p, div, h1]
##除非使用!important是強制蓋掉所有權重，是一招必殺技，贏過所有權種，需小心使用##
至於關係選擇器是指不是單獨的選擇器，而是「用來描述兩個選擇器之間關係的符號」。
像是:
- 空白：A B
- 大於號：A > B
- 加號：A + B
- 波浪號：A ~ B
空白：A B，我們叫後代選擇器，是撰寫時「由左到右」列出每一代元素，元素之間使用「空白」分隔，並選取「最右側」的元素，此處的空白稱之為「結合子 combinator」，意思為「是...的一部分」
舉例CSS:
div p {
color: red;
}
HTML:
<div>
<p>這段會是紅色（第一層）</p>
<section>
<p>這段也會是紅色（第二層孫子）</p>
</section>
</div>
<p>這段不會是紅色（不在 div 裡）</p>
呈現出來會是這樣:
- div > p（孩子） → 會被選到
- div > section > p（孫子） → 也會被選到
- 外面的 <p> 不會選到
大於號：A > B，我們叫子代選擇器，意思子代選擇器只會選擇「下一層元素」( 也就是「兒子」概念 )，子代選擇器使用「>」符號分隔，> 前後可以加上空白，加上的空白不具任何意義。
舉例CSS:
div > p {
color: blue;
}
HTML:
<div>
<p>這段會變藍色（直屬孩子）</p>
<section>
<p>這段不會變藍色（孫子）</p>
</section>
</div>
呈現出來會是這樣:
- div 的「第一層」裡的 <p> 會中
- 第二層以後的 <p> 都不會中
加號：A + B，叫相鄰兄弟選擇器表示「同一層並位於後方的特定元素」，兄弟選擇器使用「~」符號分隔，~ 前後可以加上空白，加上的空白不具任何意義。
舉例CSS:
h2 + p {
color: green;
}
HTML:
<h2>標題</h2>
<p>這段會是綠色（緊接在 h2 後）</p>
<p>這段不會變綠（因為前面不是 h2，而是 p）</p>
呈現出來會是這樣:
- 父元素 h2 ← A
- p ← 第一個 B（被選到）
- p ← 第二個 p，不選
波浪號：A ~ B，是叫一般兄弟選擇器，表示「同一層的後一個元素」，相鄰兄弟選擇器使用「+」符號分隔，+ 前後可以加上空白，加上的空白不具任何意義。
舉例CSS:
h2 ~ p {
color: purple;
}
HTML:
<p>這段不會變紫色</p>
<h2>標題</h2>
<p>這段會變紫色</p>
<p>這段也會變紫色</p>
<div>其他元素</div>
<p>這段還是會變紫色</p>
呈現出來會是這樣:
只要你是：
- 和 h2 同一個父元素
- 並且出現在它「後面」
- 且是 <p>
就會被選到。
