CSS選擇器

1、CSS基本選擇器

CSS基本選擇器包括了四類：標籤選擇器、類選擇器、id選擇器、通配選擇器
針對同一個標籤，經過這幾種方式定義的樣式的優先級分別是：
      通配選擇器<標籤選擇器<類選擇器<id選擇器

2、組合選擇器

一、包含選擇器

/*選擇div的全部後代中的span元素*/
div span{
    font-size:12px;
}

第一個選擇符名錶示：包含選擇符名稱
第二個選擇符名錶示：被包含選擇符名稱

二、子選擇器

/*選擇div的全部孩子中的span元素(父子關係)*/
div>span{
    font-size:12px;
}

第一個選擇符名錶示：父級選擇符名稱
第二個選擇符名錶示：子級選擇符名稱

三、相鄰選擇器

/*選擇div的相鄰弟弟p元素(div以後緊接着是p元素，而且是同一級)*/
div+p{
    font-size:12px;
}

第一個選擇符名錶示：「兄」選擇符名稱
第二個選擇符名錶示：「弟」選擇符名稱
其結構是第一個選擇器指定前面相鄰元素，後面的選擇器指定相鄰元素

四、兄弟選擇器

/*選擇div標籤後面的全部同級的p元素*/
div~p{
    font-size:12px;
}

第一個選擇符名錶示：「兄」選擇符名稱
第二個選擇符名錶示：「弟」選擇符名稱
其基本結構是第一個選擇器指定同級前置元素，後面的選擇器指定其後同級全部匹配元素。兄弟選擇器和相鄰選擇器的區別是：相鄰選擇器只能選擇前置元素後相鄰的一個匹配元素，兄弟選擇器可以選擇前置元素後同級的全部匹配元素。

五、分組選擇器

/*選擇全部的div、p、h1元素*/
div,p,h1{
    font-size:12px;
}

其基本結構是選擇出用逗號分隔的全部匹配元素。

3、屬性選擇器

一、只指定屬性名

/*形式：E[attr][attr]...:*/
.nav a[id]{
    font-size:12px;       /*選擇class爲nav的元素的全部子元素中，具備id屬性的a元素*/
}

.nav a[id][title]{
    font-size:12px;       /*選擇class爲nav的元素的全部子元素中，具備id屬性和title屬性的a元素*/
}

二、指定屬性名，並指定屬性值

/*形式：E[attr="value"]...:*/
.nav a[id="one"]{
    font-size:12px;       /*選擇class爲nav的元素的全部子元素中，id屬性值爲one的a元素*/
}

.nav a[class="nav first"][title]{
    font-size:12px;       /*選擇class爲nav的元素的全部子元素中，具備title屬性，而且class屬性值爲nav first的a元素*/
}

注意：屬性值必須徹底匹配

三、指定屬性名，並具備該屬性值
與上面惟一的不一樣就是屬性值不必定要徹底匹配，屬性值是一個詞列表(相似於class同樣能夠有多個)，只要詞列表中有一個值爲value就能夠。

/*形式：E[attr~="value"]...:*/
.nav a[class="nav first"][title]{
    font-size:12px;       /*選擇class爲nav的元素的全部子元素中，具備title屬性，而且class屬性值爲nav或first或nav first的a元素*/
}

四、指定屬性名，並屬性值是以value開頭的

/*形式：E[attr^="value"]...:*/
.nav a[title^="https://"]{
    font-size:12px;     /*選擇class爲nav的元素的全部子元素中，具備title屬性，而且title屬性值以https://開頭的a元素*/
}

五、指定屬性名，而且屬性值是以value結束的

/*形式：E[attr$="value"]...:*/
.nav a[href$="png"]{
    font-size:12px;     /*選擇class爲nav的元素的全部子元素中，具備href屬性，而且href屬性值以png結尾的a元素*/
}

六、指定屬性名，而且屬性值中包含了value

/*形式：E[attr*="value"]...:*/
.nav a[title*="mine"]{
    font-size:12px;     /*選擇class爲nav的元素的全部子元素中，具備title屬性，而且title屬性值包含了mine的a元素*/
}

七、指定屬性名，而且屬性值是value或者以value-開頭的值

/*形式：E[attr|="value"]...:*/
.nav img[src|="img"]{
    width:200px;     /*選擇class爲nav的元素的全部子元素中，具備src屬性，而且src屬性值爲img或以img-開頭的a元素*/
}

4、僞類選擇器

/*僞類選擇器的形式：E:pseudo-class*/
a:hover{
    color:"red"
}

E表示：元素
pseudo-class表示：僞類名稱

僞類選擇器的分類
一、動態僞類
錨點僞類：
   :link
   :visited
行爲僞類：
   :hover
   :active
   :focus

訪問一個連接的順序是：link-->visited-->hover-->active

二、結構僞類

:first-child：選擇某個元素的第一個子元素
:last-child：選擇某個元素的最後一個子元素
:nth-child(n)：選擇某個元素的第n個子元素
:nth-last-child(n)：從後往前數，選擇某個元素的第n個子元素
:nth-of-type()：選擇指定的元素，e.g： div:nth-of-type("p")
:nth-last-of-type()：從後往前數，選擇指定的元素
:first-of-type()：選擇一個上級元素下的第一個同類子元素
:last-of-type()：選擇一個上級元素下的最後一個同類子元素
:only-child：選擇的元素是它的父元素的惟一一個子元素
:only-of-type：選擇一個元素是它的上級元素的惟一一個相同類型的子元素
:empty：選擇的元素裏面沒有任何內容

三、否認僞類
:not():過濾掉特定元素 e.g： input:not([type="submit"]){}

四、UI狀態僞類

:enabled：被用來指定當元素處於可用狀態時的樣式
:disabled：被用來指定當元素處於不可用狀態時的樣式
:read-only：被用來指定當元素處於只讀狀態時的樣式
:read-write：被用來指定當元素處於非只讀狀態時的樣式
:cehcke：被用來指定當表單中的radio單選框或者是checkbox複選框處於選取狀態時的樣式
:required：元素具備required屬性

五、target僞類
:target：匹配文檔(頁面)的URI中某個標誌符的目標元素

---

以上爲僞類，下面的是僞元素：

僞類：用於向某些選擇器添加特殊的效果僞元素：用於向某些選擇器設置特殊效果上面的兩個概念看了以後確定會一臉懵逼，這不仍是同樣的嗎？下面介紹下二者的區別：一、僞類主要是爲了給某些元素添加一些特殊效果，如a標籤的link、visited僞類等；而僞元素則是建立了一個虛擬容器，這個容器不包含任何DOM元素，可是能夠包含內容，並設置其樣式。二、能夠同時使用多個僞類，而只能同時使用一個僞元素