IE7与web标准设计（2）
佚名
伪类选择符和伪对象选择符
这又是令人头疼的“名词”，到底什么是“伪类”、“伪对象”呢？到底“伪”在哪里呢？我们依然从一个大家都用过，很熟悉的示例说起：
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
<style type="text/css">
a:link,a:visited,a:active{
color:red;
}
a:hover{
color:blue;
}
</style>
</head>
<body>
<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" title="测试">鼠标附上去字会变成蓝色</a>
</body>
</html>
很简单且常见的情况，给超链接设置“鼠标移上不同字体颜色发生变化”的样式。这里的“:link”、“:visited”、“:active”和“:hover”就是“伪类”。之所以说是“伪”，是因为，这些东西一定要依附在某种标签上（示例中是<a>标签），它们并不能单独的存在，当它们单独存在的时候将没有任何意义。
在IE6中，只支持超链接<a>标签的伪类，而在IE7中，则支持几乎所有“可见标签元素”的伪类。也就是说，就算是一个div，你也可以设置div:hover的样式。可以预测的未来是：一些简单的样式方面的变化，将不再需要js去控制，用css就可以实现简单的“动态”效果。看下面的例子，将更有助于你的理解。
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="简单的XHTML页面" />
<meta name="Description" content="这是一个简单的XHTML页面" />
<title>简单的XHTML页面</title>
<style type="text/css">
#txtName{
border:1px solid #eee;
}
#txtName:hover{
border:1px solid black;
}
</style>
</head>
<body>
<input type="text" id="txtName" />
</body>
</html>
上面的示例很简单，也很常用：一个输入名字的文本框，平时状态下，是“灰色”边框，而当用户将鼠标以上去的时候，边框“变成”黑色，从而达到提醒的目的。
下面是IE7和FireFox的显示效果截图。
图：对<input>设置伪类样式