<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS伪类</title>
</head>
<style>
/* css伪类:当元素处于某种特殊情况下时,或者元素的某一部分所触发的类 */
/* 伪类格式: 选择器:为类名 */
/* 只有应用于那些可以进行交互的目标上,比如 链接 按钮等 */
input:focus {
transform: rotate(39deg);
transition: transform 3s linear;
}
button:focus {
transform: rotate(39deg);
transition: transform 3s linear;
}
/* hover,鼠标指针悬停在元素上时所触发的伪类 */
img:hover {
transform:rotate(30deg) scale(1.2,1.2);
}
/* 前缀,不可被选中 相应的有后缀 after */
#d:before{
content: "路飞";
font-size: 30px;
color: aquamarine;
}
</style>
<body>
<input type="text">
<table>
<tr>
<td>adf</td>
<td>sdf</td>
<td>sdf</td>
</tr>
<tr>
<tr>asdf</tr>
<tr>sdf</tr>
<tr>sadf</tr>
</tr>
</table>
<button>你好</button>
<a href="http://www.baidu.com">百度一下</a>
<p id="d">草帽</p>
<img id="a" src="../前端/img图片库/1.jpg" alt="">
<p>草帽</p>
<img id="b" src="../前端/img图片库/2.jpg" alt="">
<p>草帽</p>
<img id="c" src="../前端/img图片库/3.jpg" alt="">
</body>
</html>