鑑於部分選擇器，偶爾要使用的時候都要重新查一次，特以本篇整理出來，並考慮到瀏覽器相容性問題，還是將版本區分為CSS3以及CSS2.1以前，以減少找不到問題點的窘境。
CSS2.1以前的選擇器
| 選擇器 | 作用範圍 | 範例 |
|---|---|---|
| * | 萬用字元 = 全選 | |
| E | 任何一個 指定的 html tag (E表任意的 HTML tag) | |
| E F | 任何包含在E裡面的F，無論階層。 (E與F均為任意的 HTML tag) | <E> <F></F> <G> <F></F> </G> </E> |
| E,F | 所有的 E以及F | |
| E > F | 任何E的第一階子元素F。 | <E> <F></F> <G> <F></F> </G> </E> |
| E + F | 任何一個立即跟在E後面的F | <E> <F></F> </E> <F></F> <F></F> |
| E:first-child | 任何一個E，且為其父階層的第一個元素 | <D> <E></E> <E></E> </D> <D> <G></G> <E></E> </D> |
| E:first-letter | E內容中的第一個字 | |
| E:first-line | E內容中的第一行 | |
| E:before E:after | 在E的前面或後面插入內容 | |
| E:link E:visited E:active E:hover E:focus | 主要應用於連結標籤<a>， | |
| E[foo] | 任一個擁有foo屬性的E，無論屬性值為何 | <E foo=""></E> |
| E[foo="warning"] | 任一個擁有foo屬性的E，且其屬性值為"warning" | <E foo="warning"></E> |
| E[foo~="warning"] | 任一個擁有foo屬性的E，且其屬性值中包含"warning"(以空格區分) | <E foo="warnings"></E> <E foo="warning"></E> <E foo="warning test"></E> |
| E.warning | 類別選擇器，任何一個class屬性值包含"warning"的E，等同於E[class~="warning"] | <E class="warning"></E> |
| E#myid | ID選擇器，任何一個id屬性值為 "myid"的E | <E id="myid"></E> |
CSS3中新增的選擇器
| 選擇器 | 作用範圍 | 範例 |
|---|---|---|
| E ~ F | 任何E以後，且與E位於同階層的F | <G> <F></F> <E><F></F></E> <F></F> </G> |
| E:first-of-type | 任何一個作為父階層底下的第一個E | <D> <E></E> <E></E> </D> <D> <G></G> <E></E> </D> |
| E:last-of-type | 任何一個作為父階層底下的最後一個E | <D> <E></E> <E></E> </D> <D> <E></E> <E></E> <G></G> </D> |
| E:only-of-type | 任何一個作為父階層底下的唯一的一個E | <D> <E></E> <G></G> </D> <D> <E></E> <E></E> <G></G> </D> |
| E:only-child | 任何一個E，且為其父階層底下的唯一元素 | <D> <E></E> </D> <D> <E></E> <G></G> </D> |
| E:nth-child(n) | 任何一個E，且為其父階層底下的第n個元素，(範例n=2) | <D> <E></E> </D> <D> <G></G> <E></E> </D> |
| E:nth-last-child(n) | 任何一個E，且為其父階層底下由後數來的第n個元素，(範例n=2) | <D> <E></E> </D> <D> <E></E> <G></G> </D> |
| E:nth-of-type(n) | 任何一個作為父階層底下的第n個E ,(範例n=2) | <D> <G></G> <E></E> <E></E> </D> <D> <G></G> <E></E> </D> |
| E:nth-last-of-type(n) | 任何一個作為父階層底下由後數來的第n個E ,(範例n=2) | <D> <G></G> <E></E> <E></E> </D> <D> <G></G> <E></E> </D> |
| E:last-child | 任何一個E，且為其父階層的最後一個元素 | <D> <E></E> <E></E> <G></G> </D> <D> <G></G> <E></E> </D> |
| :root | 文件的根元素，一般來說就是<html> | |
| E:empty | 任何一個完全無任何子元素及內容的E | |
| E:target | 目前網址列上指向的錨點 | |
| E:enabled E:disabled E:checked | 主要應用在<input>，分別為選取「啟用中」、「停用中」、「已選取」的表單元素 | |
| :not(E) | 所有非E的元素 | |
| ::selection | 用以指定元素被選取時的狀態,firefox需利用前綴-moz-方能支援 | |
| E[foo^="warning"] | 任一個擁有foo屬性的E，且其屬性值開始於為"warning" | <E foo="warning test "></E> <E foo="test warning "></E> |
| E[foo$="warning"] | 任一個擁有foo屬性的E，且其屬性值結束於"warning" | <E foo="warnings test"></E> <E foo="test warning"></E> |
| E[foo*="warning"] | 任一個擁有foo屬性的E，且其屬性值包含"warning"，無論是否有空格 | <E foo="warnings_test"></E> <E foo="test warning"></E> <E foo="warnings"></E> <E foo="test"></E> |
| E.warning | 類別選擇器，任何一個class屬性值包含"warning"的E，等同於E[class~="warning"] | <E class="warning"></E> |
| E#myid | ID選擇器，任何一個id屬性值為 "myid"的E | <E id="myid"></E> |