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偽類， 可以設置點擊鼠標時的聚焦效果， 如下圖所示， 當我們點擊用戶名文本框時出現黃色的背景色 。





特別提示 【如何使用CSS的偽類】注意錨偽類的使用順序問題 。

以上內容就是如何使用CSS的偽類的內容啦， 希望對你有所幫助哦！

猜你喜歡

• WPS表格插入圖片時，如何鎖定縱橫比？
• WPS表格中如何求多個數據的積？
• 如何使用excel打印標題
• FaceU激萌如何設置自己喜歡的水印？
• 怎么使用微信中的群收款功能？
• Excel中如何設置不讓彈出超鏈接
• Abaqus如何對已知load進行更改編輯？
• Abaqus如何施加荷載？
• CAD中半徑標注的使用方法
• Excel中如何設置將0值顯示成短橫線