溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“css偽類使用實例分析”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
偽類被添加到選擇器上，它前面有一個冒號，后跟一個帶括號值的屬性。偽類的語法如下
selector:pseudo-class{property:value;}
基本偽類
有許多不同的偽類，下面的代碼示例演示了一些最基本的偽類。這些被歸類為動態(tài)偽類，由于用戶的操作而改變。在代碼示例中，：link偽類用于將鏈接的顏色設(shè)置為藍色。一旦用戶訪問了鏈接，則：visited偽類用于將鏈接的顏色更改為maroon。還演示了：當(dāng)用戶將鼠標(biāo)懸停在圖像上時，懸停用于將帶有白色文本的紫色圓圈更改為帶有黃色文本的粉紅色正方形。重點偽類更改日期輸入字段為灰色，當(dāng)用戶點擊或在其上“重點”。
<!DOCTYPEhtml>
<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><ahref="https://www.php.cn/"target="_blank">Clickonthislink!</a></b></p>
<div>Hoveroverthis</div>
<p><b>Entertodaysdateinthefieldbelow</b></p>
<form>
Date:<inputtype="text"name="Date"><br>
</form>
</body>
</html>
一些更多的偽類
下面列出了一些更常用的偽類?？稍诖颂幷业剿袀晤惖耐暾斜?。
?。篺irst-child-此類允許您將特定樣式添加到作為其父元素的第一個子元素的元素。
?。簉oot-此偽類用于匹配文檔的根元素。
?。簂ang-不同的語言有不同的規(guī)則和慣例。有時您需要創(chuàng)建多種語言使用的頁面。：lang偽類對于這種情況很有用。它主要查看lang=“”HTML屬性和<meta>元素，并相應(yīng)地匹配元素。
?。篸isabled-這允許您指示禁用的輸入元素，如文本字段和按鈕。
?。篺ullscreen-此偽類使用處于全屏模式的元素。
偽元素
偽元素具有與偽類類似的功能，因為它們可以由CSS設(shè)置樣式并由用戶代理添加。但是它們與偽類不同，因為它們允許您使用DOM中不存在的元素。偽元素的語法標(biāo)識符通常是雙冒號，而不是像偽類一樣的單冒號。常見的偽元素是::before，::after和::first-line。重要的是要注意一些編碼器使用單個冒號：對于偽元素，這是CSS2中的慣例。請記住這一點，以避免偽類和偽元素之間的混淆。
“css偽類使用實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
