- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
-
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
<!DOCTYPE html><!--简单导航栏的实现-->
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head><body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul><p>背景颜色添加到链接中显示链接的区域</p>
<p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>
</html> -
<!DOCTYPE html><!--选择器的应用-->
<html>
<head>
<!--选择器 标签 id class 元素 属性 子选择器 兄弟选择器 后代选择器 相邻选择器 -->
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
#p_idname{
color: green;
font-style: italic;
font-size: 20px;
font-weight: bolder;
}
.p_cname{
color: red;
font-style: inherit;
font-size: 20px;
}
h3{
color: blue;
font-style: initial;font-size: 20px;
}
div p{
color: yellow;
font-style: normal;font-size: 20px;
}
#zxuanz>p{
color: pink;
font-style: oblique;font-size: 20px;
}
</style>
</head>
<body>
<p id="p_idname">id选择器</p>
<p class="p_cname">class选择器</p>
<h3>元素选择器</h3>
<div id="sx">
<p>yellow text 属性选择器</p>
</div>
<div id="zxuanz">
<p>red text</p>
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
</div>
</body>
</html>
