第十六章中介绍的定位方法可以使我们的CSS文件中的设置应用的某一类或者某一个标签上。除此之外，标签中还提供了另外一种CSS状态设置方式。这种定位方式并不是在所有标签中选取一部分标签进行设置，而是设置标签的不同的状态，以<a>标签为例来进行说明，<a>标签代表的是一个超链接，这个超链接可以有很多状态，比如未访问、已访问、鼠标在超链接上悬停等。我们可以在CSS文件中对<a>标签的不同状态进行样式设置。那如何访这些状态呢？这些状态的名称都是固定的（我猜应该是像winform编程时的那些控件事件一样，比如mousedone，mouseup，mousemove等），比如a:link表示未访问的链接，a:visited表示已经访问的链接，a:hover表示鼠标在超链接上悬停。这种定位的形式为标签名加冒号（:）再加状态名称，这种形式称为Pseudo-Class（中文翻译为伪类）。其他的标签与<a>标签类似，可用的状态名称可以到网上去搜索。
除了表示状态的标签状态名称，还可以指定父标签的第几个子标签的名称，比如a:first-child表示a标签所在父标签的第1个标签，a:nth-child(2)表示a标签所在父标签的第2个标签，括号中的数字表示父标签的第几个子标签，前面的nth-child 是固定的。值得注意的是a:nth-child(2)表示的是a标签所在父标签的第2个元素如果是a标签的话则应用a:nth-child(2)的设置，如果标签为空，只有冒号和后面的内容，比如nth-child(2)则表示父标签的第2个元素应用:nth-child(2)样式设置。
下面以<a>为例展示代码和效果：
html代码：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div>
<a href="www.baidu.com">百度</a> <br />
<a href="www.google.com.hk">google</a>
<br /> <a href="http://news.163.com">网易新闻</a>
</div>
</body>
</html>
CSS文件：
a:link
{
color:#008b45;
text-decoration:none;
}
a:hover
{
color:#00ff00;
}
a:visited
{
color:#ee9a00;
}
效果图：
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
