首先推薦一個(gè)非常實(shí)用的css參考手冊(cè)：http://www.css88.com/book/css/
css選擇器詳細(xì)語(yǔ)法：
1、 基本選擇器：
| 選擇器 | 類型 | 功能描述 | 例子 |
|---|---|---|---|
| * | 全部選擇器 | 匹配文檔中任何html元素 | * |
| element | 元素選擇器 | 匹配指定名稱的html元素 | div |
| #id | id選擇器 | 匹配指定id的html元素 | #password |
| .class | 類選擇器 | 匹配指定類的html元素 | .header |
| a, b | 選擇多個(gè)選擇器 | 匹配指定的a和b元素 | .header, #password |
2、 層次選擇器：
| 選擇器 | 類型 | 功能描述 | 例子 |
|---|---|---|---|
| ab | 多重選擇器 | 匹配同時(shí)符合a和b的元素 | div.header |
| a b | 后代選擇器 | 匹配包含在a里面的所有b元素 | div p |
| a>b | 子選擇器 | 匹配在a子元素里的所有b元素 | div>p |
| a+b | 相鄰后兄弟選擇器 | 匹配位于a后的第一個(gè)元素且為b的元素 | div+p |
| a~b | 后兄弟選擇器 | 匹配位于a后的所有b元素 | div~p |
3、動(dòng)態(tài)偽類選擇器：
| 選擇器 | 類型 | 功能描述 | 例子 |
|---|---|---|---|
| E:link | 鏈接偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問(wèn)過(guò)。常用于鏈接描點(diǎn)上 | a:link |
| E:visited | 鏈接偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問(wèn)過(guò)。常用于鏈接描點(diǎn)上 | a:visited |
| E:active | 用戶行為選擇器 | 選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點(diǎn)和按鈕上 | a:active |
| E:hover | 用戶行為選擇器 | 選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hover | a:hover |
| E:focus | 用戶行為選擇器 | 選擇匹配的E元素，而且匹配元素獲取焦點(diǎn) | input:focus |
4、目標(biāo)偽類選擇器
| 選擇器 | 類型 | 功能描述 | 例子 |
|---|---|---|---|
| E:target | 活動(dòng)錨點(diǎn)選擇器 | 選取當(dāng)前活動(dòng)的錨點(diǎn) | a:target |
5、表單元素狀態(tài)偽類選擇器語(yǔ)法
| 選擇器 | 類型 | 功能描述 | 例子 |
|---|---|---|---|
| E:checked | 選中狀態(tài)偽類選擇器 | 匹配選中的復(fù)選按鈕或者單選按鈕表單元素 | input:checked |
| E:enabled | 啟用狀態(tài)偽類選擇器 | 匹配啟用的表單元素 | input:enabled |
| E:disabled | 禁用狀態(tài)偽類選擇器 | 匹配禁用的表單元素 | input:disabled |
6、結(jié)構(gòu)偽類選擇器使用語(yǔ)法
選擇器|功能描述|例子
-|
E:first-child|匹配作為父元素的第一個(gè)子元素且元素為E。與E:nth-child(1)等同|p:first-child
E:last-child|匹配作為父元素的最后一個(gè)子元素且元素為E。與E:nth-last-child(1)等同|p:last-child
E:root|:root在html文檔里就代表html元素|:root或者h(yuǎn)tml:root
E:nth-child(n)|匹配作為父元素的第n個(gè)子元素且為元素E。其中n可以是整數(shù)（1，2，3）、關(guān)鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0.|li:nth-child(2)
E:nth-last-child(n)|匹配作為父元素的倒數(shù)第n個(gè)子元素且為元素E。和E:nth-child(n)順序相反，其他用法一樣|li:nth-last-child(3)
E:nth-of-type(n)|匹配E元素，且其在父元素里恰好排為第n個(gè)E元素|p:nth-of-type(2)
E:nth-last-of-type(n)|匹配E元素，且其在父元素里恰好排為倒數(shù)第n個(gè)E元素|p:nth-last-of-type(2)
E:first-of-type(n)|匹配E元素，且其在父元素里恰好排為第1個(gè)E元素|p:first-of-type(2)
E:last-of-type(n)|匹配E元素，且其在父元素里恰好排為倒數(shù)第1個(gè)E元素|p:last-of-type(2)
E:only-child|匹配E元素，且其父元素只有E這個(gè)元素|p:only-child
E:only-of-child|匹配E元素，且其父元素只有一個(gè)E類型元素|p:only-of-child
E:empty|匹配沒(méi)有任何子元素（包括text節(jié)點(diǎn)）的元素E|p:empty
7、否定偽類選擇器
選擇器|功能描述|例子
-|
E:not(s)|匹配不含有s選擇符的元素E|li:not(:last-child)
8、屬性選擇器
選擇器|功能描述|例子
|
E[att] |匹選擇具有att屬性的E元素|img[alt]
E[att="val"] |選擇具有att屬性且屬性值等于val的E元素|input[type="text"]
E[att="val"]|選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個(gè)等于val的E元素（包含只有一個(gè)值且該值等于val的情況）|div[class="a"]
E[att="val"]|選擇具有att屬性且屬性值為以val開(kāi)頭的字符串的E元素|div[class="a"]
E[att$="val"]|選擇具有att屬性且屬性值為以val結(jié)尾的字符串的E元素|div[class$="c"]
E[att="val"]|選擇具有att屬性且屬性值為包含val的字符串的E元素|div[class="b"]
E[att|="val"]|選擇具有att屬性且屬性值為以val開(kāi)頭并用連接符"-"分隔的字符串的E元素，如果屬性值僅為val，也將被選擇|div[class|="a"]
9、偽類選擇器
E:first-letter/E::first-letter
E:first-line/E::first-line
E:after/E::after
E::placeholder
E::placeholder
