元素選擇器
作用：通過元素選擇器可以選擇頁面中的所有的元素
語法：標籤名{ }
id選擇器
通過元素的ID屬性值選中唯一的一個元素
#p1{
font-size: 20px;
}
類選擇器
通過元素的class屬性值選中一組元素
.p2{
color: red;
}
選擇器分組
通過選擇器分組可以同時選中多個選擇器對應的元素
語法：選擇器1，選擇器2，選擇器n{ }
#p1, .p2 ,h1{
background-color: yellow;
}
通配選擇器
可以用來選中頁面中的所有的元素
*{
color: red;
}
複合選擇器（交集選擇器）
作用：
可以選中同時滿足多個選擇器的元素
語法：
選擇器1,選擇器2選擇器n{ }
span.p3{
background-color: yellow;
}
屬性選擇器
作用：可以根據元素中的屬性或屬性值來選取指定元素
語法：
[屬性名] 選取含有指定屬性的元素
[屬性名=“屬性值”]選取含有指定屬性值的元素
[屬性名^=“屬性值”]選取屬性值以指定內容開頭的元素
[屬性名$=“屬性值”]選取屬性值以指定內容結尾的元素
[屬性名*=“屬性值”]選取屬性值以包含指定內容的元素
僞類選擇器
僞類專門用來表示元素的一種的特殊的狀態
eg：訪問過的超鏈接，普通的超鏈接，獲取焦點的文本框
當我們需要爲處在這些特殊狀態的元素設置樣式時，就可以使用僞類
:link
表示普通的鏈接（沒訪問過的鏈接）
a:link{
color: yellowgreen;
}
:visited
僞類只能設置字體的顏色
a:visited{
color: red;
}
:hover
僞類表示鼠標移入的狀態
a:hover{
color: skyblue;
}
:active
表示的是超鏈接被點擊的狀態
a:active{
color: black;
}
子元素選擇器
:first-child 可以選中第一個子元素
:last-child 可以選中最後一個元素
:nth-child 可以選中任意位置的子元素
該選擇器後邊可以指定一個參數，指定要選中第幾個子元素
* even 表示偶數位置的子元素
* odd 表示奇數位置的子元素
:nth-of-type
type是在當前類型的子元素中排列
兄弟選擇器
後一個兄弟元素選擇器
作用：可以選中一個元素後緊挨着的指定的兄弟元素
語法：前一個+後一個
span + p{
background-color: yellow;
}
選中後邊的所有的兄弟元素
語法：前一個~後邊所有
span ~ p{
background-color: yellow;
}
否定僞類：
作用：可以從選中的元素中剔除出某些元素
p:not(.hello){
background-color: yellow;
}