溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css偽類指的是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
一個CSS偽類可以讓你到一個特定的狀態分配給一個元素。例如，用戶將鼠標懸停在網頁上的圖像上，并將其更改為另一個圖像。鏈接在訪問后會更改顏色，并且可以與未訪問的鏈接區分開來。表單上的輸入框被禁用，并且不帶值。偽類可以實現這些操作和更多操作。普通的CSS類也可以與偽類一起使用。
CSS3添加了比以前CSS2中更多的偽類。
偽類被添加到選擇器上，它前面有一個冒號，后跟一個帶括號值的屬性。偽類的語法如下
selector: pseudo-class { property:value;}基本偽類
有許多不同的偽類，下面的代碼示例演示了一些最基本的偽類。這些被歸類為動態偽類，由于用戶的操作而改變。在代碼示例中，：link 偽類用于將鏈接的顏色設置為藍色。一旦用戶訪問了鏈接，則：visited 偽類用于將鏈接的顏色更改為maroon。還演示了：當用戶將鼠標懸停在圖像上時，懸停用于將帶有白色文本的紫色圓圈更改為帶有黃色文本的粉紅色正方形。的：重點偽類更改日期輸入字段為灰色，當用戶點擊或在其上“重點”。代碼示例在這里 為自己嘗試一下！
<!DOCTYPE html>
<html>
<head>
<style>
a:link{
color:blue;
}
a:visited{
color:maroon;
}
div {
background-color: purple;
color: white;
line-height:90px;
font-size:20px;
text-align:center;
width:200px;
height:200px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
div:hover {
background-color:pink;
color:yellow;
width:200px;
height:200px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
input:focus {
background-color: lightgray;
}
</style>
</head>
<body>
<p><b><a href="https://www.php.cn/" target="_blank">Click on this link!</a></b></p>
<div>Hover over this</div>
<p><b>Enter todays date in the field below</b></p>
<form>
Date: <input type="text" name="Date"><br>
</form>
</body>
</html>一些更多的偽類
下面列出了一些更常用的偽類。可在此處找到所有偽類的完整列表。
：first-child- 此類允許您將特定樣式添加到作為其父元素的第一個子元素的元素。
：root- 此偽類用于匹配文檔的根元素。
：lang- 不同的語言有不同的規則和慣例。有時您需要創建多種語言使用的頁面。：lang偽類對于這種情況很有用。它主要查看lang =“”HTML屬性和<meta>元素，并相應地匹配元素。
：disabled- 這允許您指示禁用的輸入元素，如文本字段和按鈕。
：fullscreen- 此偽類使用處于全屏模式的元素。
偽元素
偽元素具有與偽類類似的功能，因為它們可以由CSS設置樣式并由用戶代理添加。但是它們與偽類不同，因為它們允許您使用DOM中不存在的元素。偽元素的語法標識符通常是雙冒號，而不是像偽類一樣的單冒號。常見的偽元素是:: before ，:: after 和:: first-line 。重要的是要注意一些編碼器使用單個冒號：對于偽元素，這是CSS2中的慣例。請記住這一點，以避免偽類和偽元素之間的混淆。
最后
偽類可以使得特殊狀態應用于元素。它們允許開發人員創建很酷的效果，而無需使用JavaScript等腳本語言。有許多不同類型的偽類，使您可以在保持代碼簡單的同時使頁面更具交互性和趣味性。
看完了這篇文章，相信你對css偽類指的是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
