1. 選擇器簡介

◦【MDN】https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors

　　2. 選擇器

◦簡單選擇器（Simple selectors）：通過元素類型、class 或 id 匹配一個或多個元素，之所以這么稱呼它是因為它們基于元素的類型（或其 class或 id）直接匹配文檔的一個或多個元素。 ◦類型選擇器（又名元素選擇器）

<p>
　　What color do you like?
</p>
<div>
　　I like blue.
</div>
/* All p elements are red */
p {
color: red;
}
/* All div elements are blue */
div {
color: blue;
}

◦此選擇器只是一個選擇器名和指定的HTML元素名的不區分大小寫的匹配。這是選擇所有指定類型的最簡單方式

◦類選擇器

<ul>
<li class="first done">Create an HTML document</li>
<li class="second done">Create a CSS style sheet</li>
<li class="third">Link them all together</li>
</ul>
/* The element with the class "first" is bolded */
.first {
font-weight: bold;
}
/* All the elements with the class "done" are strike through */
.done {
text-decoration: line-through;
}

◦類選擇器由一個點“.”以及類后面的類名組成。類名是在 HTML class 文檔元素屬性中沒有空格的任何值
 

◦文檔中的多個元素可以具有相同的類名，而單個元素可以有多個類名(以空格分開多個類名的形式書寫)

◦ID 選擇器

<p id="polite">
Good morning
</p>
<p id="rude">
Go away
</p>
#polite {
font-family: cursive;
}
#rude {
font-family: monospace;
text-transform: uppercase;
}

◦ID選擇器由哈希/磅符號 (#)組成，后面是給定元素的ID名稱

◦任何元素都可以使用 id 屬性設置唯一的ID名稱。 這是選擇單個元素的最有效的方式

◦通用選擇器

<div>
<p>I think the containing box just needed a <strong>border</strong> or <em>something</em>, but this is getting <strong>out of hand</strong>!</p>
</div>
* {
padding: 5px;
border: 1px solid black;
background: rgba(255,0,0,0.25)
}

◦通用選擇（*）是最終的王牌。它允許選擇在一個頁面中的所有元素。
◦由于給每個元素應用同樣的規則幾乎沒有什么實際價值，更常見的做法是與其他選擇器結合使用