虛擬類別選擇器(Pseudo-classes Selector)是針對特定的疑似狀態進行樣式指定，例如入力的狀態、連結的狀態、滑鼠移動的狀態等(link、active、visited、hover、focus、lang)。虛擬元素(Pseudo-elements Selector)，是針對元素內特定的虛擬子元素、文字、行等進行樣式指定，亦可以在元素前後增加文字和畫像(first-child、first-line、first-letter、befor、after)。但是，各種網頁瀏覽器的支援疑似元素/類別選擇器的狀態不一，需要注意。
選擇器內的元素和虛擬元素/類別之間，使用(:)符號區隔。宣告區以一組大括號({ })括弧起來，裡面可以宣告0個以上的屬性及其屬性值。屬性和屬性值之間用(：)冒號區隔起來，屬性定義之間和最後結尾必須加上(；)分號。注意，屬性值不須加上('')單引號或(" ")雙引號
虛擬類別選擇器(Pseudo-classes Selector)
 |
td:hover { color : #f00 ; } |
|---|
虛擬類別有下列幾種:
- a:link
- 宣告區的樣式套用於未參觀的連結
(例a:link { color : #00f ; }) - a:visited
- 宣告區的樣式套用於已參觀過的連結
(例a:visited { color : #369 ; }) - 元素:acitve
- 宣告區的樣式套用於點選過的元素上
(例a:acitve { color : #f00 ; }) - 元素:hover
- 宣告區的樣式套用於滑鼠游標移動至對象元素時
(例a:hover { color : #ddd ; }、td:hover { color : #f00 ; }) - 元素:focus
- 宣告區的樣式套用於操作焦點至對象Form元素時(input、textarea元素)
(例textarea:focus { background : pink ; }) - 元素:lang(語言碼)
- 宣告區的樣式套用於對象語言碼的元素
(例p:lang(zh-tw) { color : red ; })
*2)Window IE 6、7前的版本，focus、lang皆不適用。
虛擬元素選擇器(Pseudo-elements Selector)
 |
li:befor { content : "→" ; } |
|---|
虛擬元素有下列幾種:
- 元素:first-child
- 宣告區的樣式套用於對象元素內的第1個子元素
(例p:first-child { text-indent : 0 ; }) - 元素:first-line
- 宣告區的樣式套用於對象元素內的第1行((自動換行、強置換行前)
(例p:first-line { font-size : 150% ; }) - 元素:first-letter
- 宣告區的樣式套用於對象元素內的第1個文字
(例p:first-letter { font-size : 150% : }) - 元素:before
- 指定對象元素之前加入content屬性值(文字列、圖像等)
(例li:befor { content : "→" ; }) - 元素:after
- 指定對象元素之後加入content屬性值(文字列、圖像等)
(例h1:after { content : url(more.gif) ; })