僞類
- active：元素激活時
- 使用方法和用在a标簽時相同 例: div.cd : avtive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>測試active僞類</title>
<style>
/* active：點選不放為激活，激活後樣式從初始id内設定的改變為active */
#d1{
width: 100px;
height: 100px;
background-color: aquamarine;
}
#d1:active{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<!-- 該執行個體：激活後将100px正方形變為200px正方形 顔色發生改變 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>focus僞類</title>
<style>
#d1{
border-color:#dee1e6 ;
}
#d1:focus{
border-color: black;
}
</style>
</head>
<body>
請輸入：<input type="text" id="d1" placeholder="觀察邊框變化">
</body>
</html>
- hover僞類：最常用，hover可以為任何元素添加任何屬性
- 這個僞類巨牛逼！！
- 首先第一個用途與作為錨點僞類是相同的，控制滑鼠經過或懸浮時樣式的改變
- 第二個作用：可以控制子元素的樣式改變
- 代碼片;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hover僞類</title>
<style>
#d1{
width: 100px;
height: 100px;
background-color: tomato;
}
#d2{
width: 50px;
height: 50px;
background-color: black;
}
/* #d1:hover{
width: 100px;
height: 100px;
background-color: red;
} */
#d1:hover #d2{
/* 滑鼠懸浮在d1時，觸發d2樣式發生改變
用于控制子元素的樣式改變 */
border-radius: 50%;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
![十大酷炫屌的圖像懸停特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)