在使用internal styling和external styling時，會需要用到選擇器，用以選擇HTML中要套用CSS的元素。

universal selector

選擇全部的元素。

*{}

element selector

標籤選擇器，選取所有同樣的標籤。

h1{}

id selector

id選擇器，用以選擇在標籤中設定的id。
html中的標籤都僅能設定一個id，且須是唯一的。

#idname{}

class selector

class選擇器，可以選擇在標籤中設定的class(類別)。
標籤中僅能有一個id，但可以有很多class。

.class{}。

在標籤寫兩個class以上時，寫class = "class1 class2 class3”即可。

以上三個標籤可以複合使用，

h1.class{
color: black;
}

就會是h1跟class=”class”的才會被使用。

grouping selector

不同標籤或選擇器要做同樣的設定，可以用grouping selector，語法:

h1, h2{
color: black;
}

Decendent Selector

後裔(子元素)選擇器，若有一html為:

<div class="link1">
	<a href="url">
</div>

則可以使用decendent selector:

div.link1 a{}

attribute selector: 屬性選擇器，語法:

input[type="text"]{}

pseudo classes: 偽類別，是一個keyword，被加入到selector的後面:

textarea:hover{
background-color: red;
}

(textarea: 可以自由寫東西的標籤)

:hover: 滑鼠游標移到的位置

:active: 滑鼠壓住會套用CSS

:focus: 滑鼠點擊後會套用CSS，直到點擊下一個地方。

:nth-child(number): 每幾個number的元素會適用CSS。

pseudo elements: 語法:

p::before{
content: ">>";
}

::before: 在選取的東西(段落)之前套用CSS。

::after: 在選取的東西後方套用CSS。

::first-letter: 對首字做CSS。

p::first-letter{
font-size: 2rem;
}

(2rem: 兩倍大)

::selection: 選取，改變選取的樣式。