Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 7 節： The World of CSS Selectors
###### tags: `CSS` `Udemy` `The Web Developer Bootcamp 2021`
2021.04.19（Mon.）～05.03（Mon.）
## ● 上課筆記
## CSS Selectors

（A）**`*`：**
星號標誌會指向頁面上所有的元素。

* {
    margin: 0;
    padding: 0;
}

（B）**img：**
用於選取所有的圖片。

img{
    width: 100px;
    height: 200px;
}

（C）**button：**

button{
    font-size: 30px;
}

（D）**可以用逗號，一次選取多種：**

h1, h2{
    color: red;
}

（E）**id selector：**
Select the element with ID of "logout"
---->用「#」井字號抓取

#logout{
    color: orange;
    height: 200px;
}

（E）**class selector：**
Select the element with class of "logout"
---->用「.」點點抓取

.complete{
    color: green;
}

（F）**descendent selector：**
中文是「後裔選擇器」，利用<font color="red">空格</font>來結合兩種選擇器，選擇了只有當第二個選擇器的目標為第一個選擇器目標的後裔元素。
後裔選擇器跟子選擇器相似，但是不要求一組的元素要是嚴格是父子關係。

Select all `<a>`'s that are nested inside an `<li>`
---->用「空格」隔開

li a{
    color: teal;
}

（G）**adjacent selector：**
中文是「相鄰兄弟選擇器」，利用<font color="red">加號「+」</font>來結合兩種選擇器，當第二個元素緊跟在第一個元素之後，並且兩個元素都是屬於同一個父元素的子元素，則第二個元素將被選中。

也就是說，第一個元素後面緊跟著的元素將被選中。（但不包刮第一個元素）

Select only the paragraphs that are immediately preceded by an `<h1>`
---->用「加號（+）」隔開

h1 + p{
    color: red;
}

（H）**direct child：**
中文是「子選擇器」，和descendent selector（後裔選擇器）很相似，不過子選擇器要求一組的元素要是嚴格的父子關係。他利用<font color="red">大於符號「>」</font>來結合兩種選擇器，它只會匹配那些作為第一個元素的直接後代(子元素)的第二元素。

Select only`<li>`'s that the direct children of the `<div>` element
---->用「大於符號（>）」隔開

div > li{
    color: white;
}

（I）**attribute selector：**
中文是「屬性選擇器」，CSS 屬性選擇器通過已經存在的屬性名或屬性值匹配元素。

Select all input elements where the type attribute is set to "text"

input[type="text"]{
    width: 300px;
    color: yellow;
}

（J）**pseudo classes：**
中文是「虛擬類別」or「偽類別」，CSS 虛擬類別（pseudo-class）的元素，在特殊狀態下被選取的話，會作為關鍵字被加到選擇器裡面。例如`:hover`會讓用戶的滑鼠停在某個元素的時候，套用指定選擇器的樣式。
> [虛擬類別目錄參考](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes#%E5%9F%BA%E6%9C%AC%E8%99%9B%E6%93%AC%E9%A1%9E%E5%88%A5%E7%9A%84%E7%9B%AE%E9%8C%84)
> 1. :hover()：用戶的滑鼠停在某個元素的時候，套用指定選擇器的樣式。
> 2. :active()：用戶的滑鼠點擊某個元素的時候，套用指定選擇器的樣式。
> 3. :nth-of-type()：特定第幾個元素套用指定選擇器的樣式。（至於第幾個可自訂）

（K）**pseudo elements：**
中文是「虛擬元素」or「偽元素」，偽元素是一個附加於選擇器末端的關鍵詞，允許我們對被選擇元素的特定部份修改樣式。
> [虛擬元素目錄參考](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements#%E6%A0%87%E5%87%86%E4%BC%AA%E5%85%83%E7%B4%A0%E7%B4%A2%E5%BC%95)
> 1. ::first-letter()：被加到的選擇器，其第一個字套用指定選擇器的樣式。
> 2. ::first-line()：被加到的選擇器，第一行套用指定選擇器的樣式。
> 3. ::selection()：被加到的選擇器，滑鼠反白部份套用指定選擇器的樣式。

* <font color="red">對於兩者pseudo classes以及pseudo elements的差異，應該就差在前者需要有些動作或某些特殊狀態下，才會被加進選擇器裡修改樣式;而後者則是會直接附加進選擇器裡修改樣式</font>

（L）**The CSS cascade：**
> 參考網頁：[前端新手村 CSS Cascade 串接](https://ithelp.ithome.com.tw/articles/10191613)

中文是「層疊」，也是CSS命名的第一個單字（Cascading Style Sheet，層疊樣式表）。cascade的表現方式是理解css的關鍵，而和他最密切相關的概念是specficity（權重），用來決定當發生衝突時該用哪條規則。

例如說：比較晚被宣告的，會優先被選擇使用他的樣式。

（M）**Specificity（權重）：**
> 工具：[可以計算權重的網址Specificity Calculator](https://specificity.keegan.st/)
* 一般來說的公式：

   ！importatnt
 > inline style
 > ID
 > Class/psuedo-class/attribute
 > Element/psuedo-element