1. CSS1定義的選擇器
| 選擇器 | 型別 | 說明 |
|---|---|---|
| E | 型別選擇器 | 選擇指定型別的元素 |
| E#id | ID選擇器 | 選擇匹配E的元素，且匹配元素的id為“id”，E選擇符可以省略。 |
| E.class | 類選擇器 | 選擇匹配E的元素，且匹配元素的class屬性值為“class”，E選擇符可以省略。 |
| E F | 包含選擇器 | 選擇匹配F的元素，且該元素被包含在匹配E的元素內。 |
| E:link | 連結偽類選擇器 | 選擇匹配E的元素，且匹配元素被定義了超連結並未被訪問。例：a:link |
| E:visited | 連結偽類選擇器 | 選擇匹配E的元素，且匹配元素被定義了超連結並已被訪問。例：a:visited |
| E:active | 使用者操作偽類選擇器 | 選擇匹配E的元素，且匹配元素被啟用 |
| E:hover | 使用者操作偽類選擇器 | 選擇匹配E的元素，且匹配元素正被滑鼠經過 |
| E:focus | 使用者操作偽類選擇器 | 選擇匹配E的元素，且匹配元素獲取了焦點 |
| E::first-line | 偽元素選擇器 | 選擇匹配E元素內的第一行文字 |
| E::first-letter | 偽元素選擇器 | 選擇匹配E元素內的第一個字元 |
2. CSS2定義的選擇器
| 選擇器 | 型別 | 說明 |
|---|---|---|
| * | 通配選擇器 | 選擇文件中所有元素 |
| E[foo] | 屬性選擇器 | 選擇匹配E的元素，且該元素定義了foo屬性。E選擇符可以省略，表示選擇定義了foo屬性的任意型別的元素。 |
| E[foo="bar"] | 屬性選擇器 | 選擇匹配E的元素，且該元素foo屬性值為“bar” |
| E[foo~="bar"] | 屬性選擇器 | 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值是一個以空格符分隔的列表，其中一個列表的值為“bar”，E選擇符可以省略。 |
| E[foo!="en"] | 屬性選擇器 | 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值是一個用連字元（-）分隔的列表，值以“en”開頭。 |
| E:first-child | 結構偽類選擇器 | 選擇匹配E的元素，且該元素為父元素的第一個子元素 |
| E::before | 偽元素選擇器 | 在匹配E的元素前面插入內容 |
| E::after | 偽元素選擇器 | 在匹配E的元素後面插入內容 |
| E > F | 子包含選擇器 | 選擇匹配F的元素，且該元素為所匹配E元素的子元素。 |
| E + F | 相鄰兄弟選擇器 | 選擇匹配F的元素，且該元素為所匹配E元素後面相鄰的位置。 |
3. CSS3新增屬性選擇器
| 選擇器 | 型別 | 說明 |
|---|---|---|
| E[foo^="bar"] | 屬性選擇器 | 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值以“bar”開始。E選擇符可以省略，表示可匹配任意型別的元素。 |
| E[foo$="bar"] | 屬性選擇器 | 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值以“bar”結束。E選擇符可以省略，表示可匹配任意型別的元素。 |
| E[foo*="bar"] | 屬性選擇器 | 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值包含“bar”。E選擇符可以省略，表示可匹配任意型別的元素。 |
示例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <style type="text/css"> body { font-size: 12px; } ul, li { list-style: none; } li { height: 22px; line-height: 22px; } a { text-decoration: none; color: #E47911; } a[href$="docx"] { background: url(/Content/icon/word.png) no-repeat; padding-left: 20px; } a[href$="xlsx"] { background: url(/Content/icon/excel.png) no-repeat; padding-left: 20px; } a[href$="pptx"] { background: url(/Content/icon/powerpoint.png) no-repeat; padding-left: 20px; } a[href$="pst"] { background: url(/Content/icon/outlook.png) no-repeat; padding-left: 20px; } </style> </head> <body> <ul> <li><a href="Word檔案.docx">Word檔案</a></li> <li><a href="Excel檔案.xlsx">Excel檔案</a></li> <li><a href="PPT檔案.pptx">PPT檔案</a></li> <li><a href="Outlook檔案.pst">Outlook檔案</a></li> </ul> </body> </html>
效果
4. 結構偽類選擇器
結構偽類利用DOM實現元素過濾，通過DOM的相互關係來匹配特定的元素，減少文件內對class屬性和ID屬性的定義，使得文件更加簡潔。
| 選擇器 | 說明 |
|---|---|
| E:root | 選擇匹配E所在文件的根元素。在（X）HTML文件中，根元素就是html元素，此時該選擇器與html型別選擇器匹配的內容相同。 |
| E:nth-child(n) | 選擇所有在其父元素中第n個位置的匹配E的子元素。 注意，引數n可以是數字（1、2、3）、關鍵字（odd、even）、公式（2n、2n+3）引數的索引從1開始。 tr:nth-child(3)匹配所有表格中第3排的tr； tr:nth-child(2n+1)匹配所有表格的奇數行； tr:nth-child(2n)匹配所有表格的偶數行； tr:nth-child(odd)匹配所有表格的奇數行； tr:nth-child(even)匹配所有表格的偶數行； |
| E:nth-last-child(n) | 選擇所有在其父元素中倒數第n個位置的匹配E的子元素 |
| E:nth-of-type(n) | 選擇父元素中第n個位置，且匹配E的子元素。 注意，所有匹配E的子元素被分離出來單獨排序。非E的子元素不參與排序。引數n可以是數字，關鍵字、公式。 例：p:nth-of-type(1) |
| E:nth-last-of-type(n) | 選擇父元素中倒數第n個位置，且匹配E的子元素。 |
| E:last-child | 選擇位於其父元素中最後一個位置，且匹配E的子元素。 |
| E:first-of-type |
選擇位於其父元素中且匹配E的第一個同型別的子元素。 該選擇器的功能類似於 E:nth-of-type(1) |
| E:last-of-type |
選擇位於其父元素中且匹配E的最後第一個同型別的子元素。 該選擇器的功能類似於 E:nth-last-of-type(1) |
| E:only-child | 選擇其父元素只包含一個子元素，且該子元素匹配E。 |
| E:only-of-type | 選擇其父元素只包含一個同型別的子元素，且該子元素匹配E。 |
| E:empty | 選擇匹配E的元素，且該元素不包含子節點。 |
示例
<style type="text/css"> table { table-layout: fixed; border-collapse: collapse; empty-cells: show; } tr:nth-child(even) { background-color: #f5f5f5; } </style>
設定圓角
.content { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
5. UI狀態偽類選擇器
| 選擇器 | 說明 |
|---|---|
| E:enabled | 選擇匹配E的所有可用UI元素。 |
| E:disabled | 選擇匹配E的所有不可用UI元素。 |
| E:checked | 選擇匹配E的所有可用UI元素。 例：input:checked匹配input type為radio及checkbox元素 |
6. CSS3其他選擇器
| 選擇器 | 說明 |
|---|---|
| E~F | 通用兄弟元素選擇器型別。 選擇匹配F的所有元素，且匹配元素位於匹配E的元素後面。 在DOM結構樹中，E和F所匹配的元素應該在同一級結構上。 |
| E:not(s) |
否定偽類選擇器型別。 選擇匹配E的所有元素，且過濾掉匹配s選擇符的任意元素。 s是一個簡單結構的選擇器，不能使用符合選擇器， |
| E:target | 目標偽類選擇器型別。 選擇匹配E的所有元素，且匹配元素被相關URL指向。 注意：該選擇器是動態選擇器，只有存在URL指向該匹配元素時，樣式才起效果。 例：demo.html#id |