CSS基础学习:
a标签伪类选择器:
1. 观察发现a标签具有不同的状态:
1.1 默认状态,未被访问 link
1.2 被访问过的状态 visited
1.3 鼠标长按的状态 active
1.4 鼠标悬停的状态 hover
2. 什么是a标签的为类选择器?
专门用来修改a标签不同状态的样式的
格式:
<style>
a:link{
color:skyblue;
}
a:visited{
color:green;
}
a:active{
color:orange;
}
a:hover{
color:pink;
}
</style>
3. a标签伪类选择器注意点:
(1)a标签的伪类选择器可以单独出现也可以同时;
(2)a标签的为类选择器如果可以一起出现,有严格的书写顺序:
需按照:1. link
2. visited
3. hover
4. active
(3)如果默认状态的样式和被访问过的状态一样,那么可以缩写
a标签伪类选择器简单练习——导航条:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a标签伪类选择器简单练习</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 960px;
height: 40px;
background-color: skyblue;
margin: 100px auto;
}
ul li{
list-style: none;
width: 120px;
height: 40px;
float: left;
background-color: green;
text-align: center;
line-height: 40px;
}
ul li a{
width: 120px;
height: 40px;
display: inline-block;
}
ul li a:link{
color: white;
text-decoration: none;
}
ul li a:hover{
color: red;
background-color: #adadad;
}
ul li a:active{
color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#">我是导航1</a></li>
<li><a href="#">我是导航2</a></li>
<li><a href="#">我是导航3</a></li>
<li><a href="#">我是导航4</a></li>
<li><a href="#">我是导航5</a></li>
<li><a href="#">我是导航6</a></li>
<li><a href="#">我是导航7</a></li>
<li><a href="#">我是导航8</a></li>
</ul>
</body>
</html>
PS:
(1)在企业开发中,编写a标签的伪类选择器最好写在标签选择器的后面
(2)在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
(3)在企业开发中,和a标签文字/背景 相关的都写在伪类选择器中