位置：首页>> 网络编程>> 网页设计>> IE7的web标准之道 Ⅱ（5）

IE7的web标准之道 Ⅱ（5）

作者：阿一　来源：JustinYoung's Blog　发布时间：2008-08-13 12:50:00　

标签：选择符,ie7,标准

伪类选择符和伪对象选择符

这又是令人头疼的“名词”，到底什么是“伪类”、“伪对象”呢？到底“伪”在哪里呢？我们依然从一个大家都用过，很熟悉的示例说起：

<!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="#" 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">

#txtName:hover{
border:1px solid black;
}
</style>
</head>
<body>

</html>

上面的示例很简单，也很常用：一个输入名字的文本框，平时状态下，是“灰色”边框，而当用户将鼠标以上去的时候，边框“变成”黑色，从而达到提醒的目的。

下面是IE7和FireFox的显示效果截图。

图：对<input>设置伪类样式

第一页上一页 2 3 4

6 下一页

投稿

IE7的web标准之道 Ⅱ（5）

猜你喜欢