html-更多的样式选择器（伪类选择器）--链接的四种变化（:link、:hover、:active、:visited、:first-chil:first-child、:lang）
伪类选择器：
伪类：是逻辑上存在，再文档树树中不存在的类-------------应用：超链接--具有四种状态（未访问状态、鼠标悬停状态、活动状态、访问过状态）
语法规则
选择器：伪类{
属性：属性值；
属性：属性值；
，，，
}
| 伪类类型 | 描述 |
| :link | 将样式添加到未被访问过的链接 |
| :hover | 当鼠标悬停在元素上方，向元素添加样式 |
| :active | 将样式添加到被激活的元素 |
| :visited | 将样式添加到已经被访问过的元素 |
| :first-child | 将样式添加到文档树中每一层元素指定类型的第一个子元素 |
| :first-child | 当向前被选中，获得焦点的元素添加元素样式 |
| :lang | 向带有指定lang属性的元素添加样式 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类</title>
<style type="text/css">
.box{
width: 300px;
height: 100px;
background-color:#1CF912
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="cus-link">
按钮
</a>
</div>
</body>
</html>
进行超链接的设置
link
默认设置
a==链接标签 鼠标上去 会变成手的形状 该链接地下会有下划线
link伪类-----设置默认状态下的链接
按钮：display
背景色
圆角
字体
颜色
去掉下划线
text-decoration: none; 去掉下划线
字体 font-size: 20px;
设置背景色 ： background-color: #DF358F;
圆角 border-radius: 4px;
按钮：display
当鼠标停在上方 进行背景色的修改background-color:
使用hover
前景色是文字的颜色
对图片进行鼠标悬停进行放大
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类</title>
<style type="text/css">
.box{
width: 300px;
height: 100px;
background-color:#1CF912
}
a.cus-link:link{
text-decoration: none;
font-size: 20px;
background-color: #DF358F;
border-radius: 4px;
display: inline-block;
padding: 3px 10px 4px;
}
a.cus-link:hover{
background-color: aliceblue;
color: aqua;
}
img{
width: 60%;
height: 60%;
}
img:hover{
width: 90%;
height: 90%;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="cus-link">
按钮
</a>
</div>
<img src="../images/logo.png" alt="logo">
</body>
</html>
实现效果
THE END
