什么是CSS3選擇器？它有哪些類型？都有什么作用呢？本文為您一一解答。
什么是CSS3選擇器？首先，要提到CSS3，它是最新的CSS標準，比CSS多了一些樣式設(shè)置。所以在CSS3選擇器上會有更多新內(nèi)容，讓你在網(wǎng)頁創(chuàng)作中更加便捷有效率。其中的選擇器用來針對元素進行一對一，一對多，或者多對一的有效控制，用選擇器在相應(yīng)的元素中應(yīng)用樣式，對其元素進行渲染，所以CSS3選擇器是非常重要、基礎(chǔ)的知識點。
CSS3選擇器有哪些類型？都有什么作用呢？如下圖，選擇器的種類豐富多樣，可以根據(jù)需求自行選擇最適合你的那一種。接下來全是重點，拿好小本本記下來。
以下就是各類選擇器屬性類型和作用，點擊選擇器即可前往教程學(xué)習(xí)詳細內(nèi)容，還可以在線編寫實例
1）基本選擇器
| 選擇器 | 類型 | 功能描述 |
| * | 通配選擇器 | 選擇文檔中所有HTML元素 |
| E | 元素選擇器 | 選擇指定類型的HTML元素 |
| #id | ID選擇器 | 選擇指定ID屬性值為“id”的任意類型元素 |
| .class | 類選擇器 | 選擇指定class屬性值為“class”的任意類型的任意多個元素 |
| selector1,selectorN | 群組選擇器 | 將每一個選擇器匹配的元素集合并 |
2）層次選擇器
| 選擇器 | 類型 | 功能描述 |
| E F | 后代選擇器（包含選擇器） | 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi) |
| E>F | 子選擇器 | 選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素 |
| E+F | 相鄰兄弟選擇器 | 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面 |
| E~F | 通用選擇器 | 選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
3）動態(tài)偽類選擇器
| 選擇器 | 類型 | 功能描述 |
| E:link | 鏈接偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點上 |
| E:visited | 鏈接偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點上 |
| E:active | 用戶行為選擇器 | 選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點和按鈕上 |
| E:hover | 用戶行為選擇器 | 選擇匹配的E元素，且用戶鼠標停留在元素E上。IE6及以下瀏覽器僅支持a:hover |
| E:focus | 用戶行為選擇器 | 選擇匹配的E元素，而且匹配元素獲取焦點 |
4）目標偽類選擇器
| 選擇器 | 功能描述 |
| E:target | 選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向 |
5）語言偽類選擇器
| 選擇器 | 功能描述 |
| E::lang(language) | 表示選擇匹配E的所有元素，且匹配元素指定了lang屬性，而且其值為language
|
6）UI元素狀態(tài)偽類選擇器
| 選擇器 | 類型 | 功能描述 |
| E:checked | 選中狀態(tài)偽類選擇器 | 匹配選中的復(fù)選按鈕或者單選按鈕表單元素 |
| E:enabled | 啟用狀態(tài)偽類選擇器 | 匹配所有啟用的表單元素 |
| E:disabled | 不可用狀態(tài)偽類選擇器 | 匹配所有禁用的表單元素 |
7）結(jié)構(gòu)偽類選擇器
| 選擇器 | 功能描述 |
| E:first-child | 作為父元素的第一個子元素的元素E。與E:nth-child(1)等同 |
| E:last-child | 作為父元素的最后一個子元素的元素E。與E:nth-last-child(1)等同 |
| E:root | 選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時該選擇器與html類型選擇器匹配的內(nèi)容相同 |
| E F:nth-child(n) | 選擇父元素E的第n個子元素F。其中n可以是整數(shù)（1，2，3）、關(guān)鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0. |
| E F:nth-last-child(n) | 選擇父元素E的倒數(shù)第n個子元素F。此選擇器與E:nth-child(n)選擇器計算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最后一個元素，與last-child等同 |
| E:nth-of-type(n) | 選擇父元素內(nèi)具有指定類型的第n個E元素 |
| E:nth-last-of-type(n) | 選擇父元素內(nèi)具有指定類型的倒數(shù)第n個E元素 |
| E:first-of-type | 選擇父元素內(nèi)具有指定類型的第一個E元素，與E:nth-of-type(1)等同 |
| E:last-of-type | 選擇父元素內(nèi)具有指定類型的最后一個E元素，與E:nth-last-of-type(1)等同 |
| E:only-child | 選擇父元素只包含一個子元素，且該子元素匹配E元素 |
| E:only-of-type | 選擇父元素只包含一個同類型子元素，且該子元素匹配E元素 |
| E:empty | 選擇沒有子元素的元素，而且該元素也不包含任何文本節(jié)點 |
8）否定偽類選擇器
| 選擇器 | 功能描述 |
| E:not(F) | 匹配所有除元素F外的E元素 |
9）屬性選擇器
| 選擇器 | 功能描述 |
|---|---|
| [attribute] | 用于選取帶有指定屬性的元素。 |
| [attribute=value] | 用于選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。 |
| [attribute|=value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
| [attribute$=value] | 匹配屬性值以指定值結(jié)尾的每個元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
更多偽類選擇器可以點擊CSS選擇器查看
推薦相關(guān)精選視頻：CSS3入門與實戰(zhàn)，HTML5+CSS3零基礎(chǔ)快速入門
