CSS選擇器：偽類

　　偽類(偽類選擇器)

　　偽類：同一個標簽，根據其不同的種狀態，有不同的樣式。這就叫做“偽類”。偽類用冒號來表示。

　　比如div是屬于box類，這一點很明確，就是屬于box類。但是a屬于什么類?不明確。因為需要看用戶點擊前是什么狀態，點擊后是什么狀態。所以，就叫做“偽類”。

　　靜態偽類和動態偽類

　　偽類選擇器分為兩種。

　　(1)靜態偽類：只能用于超鏈接的樣式。如下：

　　:link 超鏈接點擊之前

　　:visited 鏈接被訪問過之后

　　PS：以上兩種樣式，只能用于超鏈接。

　　(2)動態偽類：針對所有標簽都適用的樣式。如下：

　　:hover “懸停”：鼠標放到標簽上的時候

　　:active “激活”： 鼠標點擊標簽，但是不松手時。

　　:focus 是某個標簽獲得焦點時的樣式(比如某個輸入框獲得焦點)

　　PS：以上三種樣式，只能用于超鏈接。

　　超鏈接a標簽

　　超鏈接的四種狀態

　　a標簽有4種偽類(即對應四種狀態)，要求背誦。如下：

　　:link “鏈接”：超鏈接點擊之前

　　:visited “訪問過的”：鏈接被訪問過之后

　　:hover “懸停”：鼠標放到標簽上的時候

　　:active “激活”： 鼠標點擊標簽，但是不松手時。

　　對應的代碼如下：(不帶注釋)

　　a:link{

　　color:red;

　　}

　　a:visited{

　　color:orange;

　　}

　　a:hover{

　　color:green;

　　}

　　a:active{

　　color:black;

　　}

　　對應的代碼如下：(帶注釋)

　　/*讓超鏈接點擊之前是紅色*/

　　a:link{

　　color:red;

　　}

　　/*讓超鏈接點擊之后是綠色*/

　　a:visited{

　　color:orange;

　　}

　　/*鼠標懸停，放到標簽上的時候*/

　　a:hover{

　　color:green;

　　}

　　/*鼠標點擊鏈接，但是不松手的時候*/

　　a:active{

　　color:black;

　　記住，在css中，這四種狀態必須按照固定的順序寫：

　　a:link 、a:visited 、a:hover 、a:active

　　如果不按照順序，那么將失效。“愛恨準則”：love hate。必須先愛，后恨。

　　超鏈接的美化

　　問：既然a{}定義了超鏈的屬性，和a:link{}定義了超鏈點擊之前的屬性，那這兩個有啥區別呢?

　　答：無錫看婦科哪里好 http://www.xasgfk.cn/

　　a{}和a:link{}的區別：

　　a{}定義的樣式針對所有的超鏈接(包括錨點)

　　a:link{}定義的樣式針對所有寫了href屬性的超鏈接(不包括錨點)

　　超鏈接a標簽在使用的時候，比較難。因為不僅僅要控制a這個盒子，也要控制它的偽類。

　　我們一定要將a標簽寫在前面，將:link、:visited、:hover、:active這些偽類寫在后面。

　　為了實現上面這個效果，完整版代碼如下：

　　網站欄目

　　網站欄目

　　網站欄目

　　網站欄目

　　網站欄目

　　網站欄目

　　網站欄目

　　網站欄目

　　上方代碼中，我們發現，當我們在定義a:link和 a:visited這兩個偽類的時候，如果它們的屬性相同，我們其實可以寫在一起，用逗號隔開就好，摘抄如下：

　　.nav ul li a{

　　display: block;

　　width: 120px;

　　height: 50px;

　　}

　　/*兩個偽類的屬性，可以用逗號隔開*/

　　.nav ul li a:link , .nav ul li a:visited{

　　text-decoration: none;

　　background-color: purple;

　　color:white;

　　}

　　.nav ul li a:hover{

　　background-color: orange;

　　}

　　如上方代碼所示，最標準的寫法，就是把link、visited、hover這三個偽類都要寫。但是前端開發工程師在大量的實踐中，發現不寫link、visited也挺兼容。寫法是：

　　a:link、a:visited都是可以省略的，簡寫在a標簽里面。也就是說，a標簽涵蓋了link、visited的狀態(前提是都具有了相同的屬性)。寫法如下：

　　.nav ul li a{

　　display: block;

　　width: 120px;

　　height: 50px;

　　text-decoration: none;

　　background-color: purple;

　　color:white;

　　}

　　.nav ul li a:hover{

　　background-color: orange;

　　}

　　當然了，在寫a:link、a:visited這兩個偽類的時候，要么同時寫，要么同時不寫。如果只寫a屬性和a:link屬性，不規范。

　　動態偽類舉例

　　我們在第一段中描述過，下面這三種動態偽類，針對所有標簽都適用。

　　:hover “懸停”：鼠標放到標簽上的時候

　　:active “激活”： 鼠標點擊標簽，但是不松手時。

　　:focus 是某個標簽獲得焦點時的樣式(比如某個輸入框獲得焦點)