4. 偽類

動態偽類

之所以被稱為動態偽類是因為它們并不存在于HTML中——而是只有當用戶和網站交互的時候才會呈現。

有兩類動態偽類：鏈接 和用戶行為。鏈接就是:link 和:visited，而用戶行為包括:hover、:active 和:focus。

在本文中提到的css選擇器中，這幾個應該是最常用到的。

:link偽類用于鏈接尚未被用戶訪問的時候，而:visited 偽類用于用戶訪問過的鏈接，也就是說它們是相反的。

:hover偽類用于用戶移動他們的鼠標在元素上，而尚未觸發或點擊它的時候。:active偽類應用于用戶點擊元素的情況。最后，:focus偽類用于元素成為焦點的時候——最常用于表單元素。

你可以在你的樣式表中使用多種用戶行為動態偽類，這樣你就可以，比如，根據用戶的鼠標只是滑過或懸停的時候，為一個輸入框定義不同的背景色:

input:focus {
	background: #D2D2D2;
	border: 1px solid #5E5E5E;
	}
input:focus:hover {
	background: #C7C7C7;
	}

瀏覽器兼容性

動態偽類被所有的現代瀏覽器支持，甚至IE6，但是請注意，對于IE系列瀏覽器來說，IE6只允許:hover 偽類應用于鏈接元素(a標簽)而且只有IE8接受:active狀態。

:first-child

:first-child偽類允許你定位某個元素第一個子元素。比如，如果你想給你的無須列表的第一個li添加一個margin-top，你就可以這樣寫：

ul > li:first-child {
	margin-top: 10px;
	}

讓我們來看一看另一個例子:比如你想讓你的博客的側欄的H2標簽都有個頂部邊距，以將標題和它們前面的內容區分開來，但是第一個h2不需要，你就可以使用下面的代碼：

#sidebar > h2 {
	margin-top: 10px;
	}
 
#sidebar > h2:first-child {
	margin-top: 0;
	}

瀏覽器兼容性

IE6 不支持 :first-child 偽類。根據偽類應用到的設計的不同，它或許不會成為關注的主要問題。比如，如果你使用:first-child 選擇器來移除標題或段落上的頭部或底部的間距，你的布局在IE6中不會壞掉，它只會看起來有些不同。但是如果你使用:first-child選擇器從一個，比如浮動元素，移除左邊距或右邊距，將會讓你的設計亂掉。

語言偽類

語言偽類:lang()，允許你匹配一個基于它的語言的元素。

你如，你想讓你的網站的某個特定的鏈接根據頁面的語言有不同的背景顏色：

:lang(en) > a#flag {
	background-image: url(english.gif);
	}
 
:lang(fr) > a#flag {
	background-image: url(french.gif);
	}

這個選擇器將會匹配相關的鏈接——如果頁面的語言等于“en”或“fr”，或者以“en”或“fr”開頭并在后面帶個連字符“-”的話。

瀏覽器兼容性

不幸的是，只有IE瀏覽器中只有IE8支持該選擇器，其它的主要瀏覽器都支持該偽類選擇器。

5. CSS 3 偽類

:target

當你使用錨點(片段標識符 fragment identifier)的時候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，這“#comments”就是一個片段標識符，你就可以使用:target偽類來控制目標的樣式。

舉個例子，比如你有一個很長的使用了很多文字和h2標題的頁面，然后在頁面的頭部有一個對這些標題的索引。如果在點擊索引內的某個鏈接時，相應的標題以某種方式高亮，然后滾動到相應的位置，對讀者就會很有用。很簡單。

h2:target {
	background: #F2EBD6;
	}

瀏覽器兼容性

這一次，IE瀏覽器完全不支持:target偽類，另一個小問題就是Opera 在使用“前進”和后退按鈕時不支持該選擇器。但是其它的各個主流瀏覽器都支持該選擇器。

UI元素狀態偽類

有些HTML元素有enable 或disabled 狀態(比如，文本輸入框)和 checked 或unchecked 狀態(單選按鈕和復選框)。這些狀態就可以使用:enabled、:disabled 或:checked 偽類來分別定位。

那么你就會想，如果任意一個禁用的(disabled)文本框應該使用淺灰色的背景和虛線邊框：

input:disabled {
	border:1px dotted #999;
	background:#F2F2F2;
	}

你也可能會想讓所有選中的復選框有個左邊距(這樣就可以在眾多的復選框中很容易認出來)：

input[type=”checkbox”]:checked {
	margin-left: 15px;
	}

瀏覽器兼容性

所有的主流瀏覽器，除了我們常常不報希望的IE系列瀏覽器，都支持UI元素狀態偽類。如果你考慮只是添加附加級別的細節和增強網站的可用性，這個仍然是可以采用的。

6. CSS 3 結構偽類

:nth-child

:nth-child()偽類允許你定位某個父級元素的一個或多個特定的子元素.

你可以通過定義它的值為一個整數來定位某個單個子元素：

ul li:nth-child(3) {
	color: red;
	}

這將會讓ul元素的第三個li元素的文字變成紅色。注意如果在ul里面有個其它類型的元素(不是li)，它也會算作其子元素。

你可以使用表達式來定位子元素。比如，下面的表達式將從第四個開始匹配每第三個元素。

ul li:nth-child(3n+4) {
	color: yellow;
	}

在上面的這個例子中，第一個黃色的li元素將會是第四個。如果也想從第一個開始匹配，你可以使用一個簡單的表達式：

ul li:nth-child(3n) {
	color: yellow;
	}

這樣的話，第一個黃色的li元素將會是第三個子元素，然后是它后面的每隔第三個。現在想象一下如果你只想匹配列表中的前四個子元素：

ul li:nth-child(-n+4) {
	color: green;
	}

:nth-child的值同樣也可以被定義為“even” 或“odd”，和“2n” (第偶數個) 或“2n+1” (第奇數個)的效果是一樣的。