1. 標簽選擇器

直接選擇標簽

p{
    //聲明
}

2. 類選擇器

給元素設置一個className，通過.className選擇到相同className的元素

• • className必須以字母開頭
  • 區分大小寫
  • 出現多次

.className{
    //聲明
}

3. id選擇器

給元素設置一個id，通過#id選擇到相應id的元素

• • id必須以字母開頭
  • 區分大小寫
  • 只出現一次

#id{
    //聲明
}

. 通配符選擇器

• • 通過*{}選擇頁面中所有元素
  • 一般使用通配符選擇器清除默認樣式

*{
    //聲明
}

5. 組合選擇器

將不同的選擇器組合起來（用逗號隔開）一起選中

div,.className,#id{
    //聲明
}

6. 後代選擇器

//選擇ul下所有li元素後代
ul li{
    //聲明
}

7. 子選擇器

//只能選擇ul子級的li元素
ul>li{
    //聲明
}

8. 兄弟選擇器

//選擇緊接在div元素之後的所有p元素
div+p{
    //聲明
}
<!--選擇前面有div元素的每個p元素-->
div~p{
    <!--聲明-->
}

9. 屬性選擇器

<!--選擇input元素中type="text"的所有元素-->
input[type="text"]{
    <!--聲明-->
}
<!--選擇title屬性包含單詞“flower”的所有元素-->
[title~=flower]{
    <!--聲明-->
}
<!--選擇lang屬性值以“en”開頭的所有元素-->
[lang|=en]{
    <!--聲明-->
}
<!--選擇其src屬性值以“https”開頭的每個a元素-->
a[src^="https"]{
    <!--聲明-->
}
<!--選擇其src屬性值以“.pdf”結尾的每個a元素-->
a[src$=".pdf"]{
    <!--聲明-->
}
<!--選擇其src屬性值中包含“abc”子串的每個a元素-->
a[src*="abc"]{
    <!--聲明-->
}

10.偽類選擇器

<!--以下4個需按順序設置，1、2、4一般用在a標簽上-->

    <!--選擇所有未被訪問的鏈接-->
a:link{
    <!--聲明-->
}
    <!--選擇所有已被訪問的鏈接-->
a:visited{
    <!--聲明-->
}
    <!--選擇鼠標指針位於其上的鏈接-->
a:hover{
    <!--聲明-->
}
    <!--選擇活動鏈接（鼠標點中未松開時）-->
a:active{
    <!--聲明-->
}
<!--選擇屬於其父元素的第二個子元素的每個p元素-->
p:nth-child(2){
    <!--聲明-->
}
<!--選擇屬於其父元素第奇數項的子元素的每個p元素-->
p:nth-child(odd){
    <!--聲明-->
}
<!--選擇屬於其父元素第偶數項的子元素的每個p元素-->
p:nth-child(even){
    <!--聲明-->
}
<!--選擇屬於其父元素第3n+1項（n從0開始，公式可根據需求書寫）的子元素的每個p元素-->
p:nth-child(3n+1){
    <!--聲明-->
}
<!--選擇屬於其父元素的倒數第二個子元素的每個p元素-->
p:nth-last-child(2){
    <!--聲明-->
}
<!--選擇每個p元素的首字母-->
p:frist-letter{
    <!--聲明-->
}
<!--選擇每個p元素的首行-->
p:frist-line{
    <!--聲明-->
}

11.偽元素選擇器

<!--前兩個單冒號和雙冒號都支持，低版本瀏覽器可能不識別雙冒號-->

<!--在p元素之前插入一些內容-->
p:before{
    <!--聲明-->
}
p::before{
    <!--聲明-->
}
<!--在p元素之後插入一些內容-->
p:after{
    <!--聲明-->
}
p::after{
    <!--聲明-->
}
<!--應用於被用戶選中的內容-->
::selection{
    <!--聲明-->
}

CSS選擇器的簡單整理