css偽類是什麼？ css偽類的簡單介紹（附範例）-css教學-PHP中文網

首頁

web前端

css教學

css偽類是什麼？ css偽類的簡單介紹（附範例）

不言

Nov 02, 2018 am 10:08 AM

css偽類

一個CSS偽類別可以讓你到一個特定的狀態分配給一個元素。例如，使用者將滑鼠懸停在網頁上的圖像上，並將其變更為另一個圖像。連結在訪問後會更改顏色，並且可以與未訪問的連結區分開來。表單上的輸入框被停用，且不帶值。偽類可以實現這些操作和更多操作。普通的CSS類別也可以與偽類一起使用。

CSS3增加了比以前CSS2更多的偽類。（推薦課程：css3影片教學）

偽類別被加到選擇器上，它前面有一個冒號，後面有一個帶括號值的屬性。偽類的語法如下

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屬性和元素，並相應地匹配元素。

：disabled- 這允許您指示已停用的輸入元素，例如文字欄位和按鈕。

：fullscreen- 此偽類使用處於全螢幕模式的元素。

偽元素

偽元素具有與偽類別類似的功能，因為它們可以由CSS設定樣式並由使用者代理程式新增。但是它們與偽類不同，因為它們允許您使用DOM中不存在的元素。偽元素的語法識別碼通常是雙冒號，而不是像偽類一樣的單冒號。常見的偽元素是:: before ，:: after 和:: first-line 。重要的是要注意一些編碼器使用單一冒號：對於偽元素，這是CSS2中的慣例。請記住這一點，以避免偽類和偽元素之間的混淆。

最後

偽類別可以使得特殊狀態套用到元素。它們允許開發人員創建很酷的效果，而無需使用JavaScript等腳本語言。有許多不同類型的偽類，使您可以在保持程式碼簡單的同時使頁面更具互動性和趣味性。

以上是css偽類是什麼？ css偽類的簡單介紹（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn