CSS選取器的簡單整理

標籤：必須   none   連結   大小   span   css   visit   input   單詞   

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選取器的簡單整理