如何使用CSS的偽類
CSS的偽類用于向某些選擇器添加特殊的效果，最常用的便是向超鏈接中添加樣式，如顏色，字體大小，粗細等。使用標簽選擇器同樣可以設置超鏈接的樣式，但是加入了偽類可以讓超鏈接在操作過程中展示不同的效果。
工具/材料
sublime Text3
操作方法
-
01
在偽類的使用過程中，錨偽類是應用最為廣泛的，鏈接的不同狀態都可以用偽類以不同的方式顯示，這些狀態包括：未被訪問狀態，已被訪問狀態，鼠標懸停狀態和激活狀態。我們使用a : link { color: red }來設置未被訪問的鏈接，如下圖所示。
-
02
使用a:visited {color : pink;}設置已訪問過的鏈接，當頁面已經在瀏覽器打開并點擊鏈接后，顯示的便是訪問過的效果，如下圖所示。如果想要還原成未訪問之前的狀態，重新打開頁面是不行的，需要清除瀏覽器的緩存才可。
-
03
使用a:hover {color : yellow;}設置鼠標懸停在鏈接上顯示的效果，當鼠標顯示為手型時，頁面鏈接變為設置的效果，如下圖所示。
-
04
使用a:active {color : green;}設置激活鏈接的效果，只有當鼠標點擊的時候才起作用。設置a標簽被激活時的樣式（被點擊時的樣式），代碼如下圖所示。需要注意的是一定要按照順序a:link，a:visited，a:hover，a:active來設置，否則不能達到預期的效果。
-
05
first-child 偽類，可以使用first-child偽類來選擇元素的第一個子元素，如下圖第一個元素分別為<p>元素的第一個元素和<li>元素的第一個元素。
-
06
:lang 偽類，可以為不同的語言定義特殊的規則。如下圖所示，lang 類為屬性值為 no 的q元素定義引號的類型：q:lang(no) { quotes: "（" "）" }。
-
07
:focus偽類，可以設置點擊鼠標時的聚焦效果，如下圖所示，當我們點擊用戶名文本框時出現黃色的背景色。
- End
特別提示
注意錨偽類的使用順序問題。
- 發表于 2017-10-18 00:00
- 閱讀 ( 657 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章