IE7的web标准之道 Ⅱ（5）
作者：阿一 来源：JustinYoung's Blog 时间：2008-08-13 12:50:00
伪类选择符和伪对象选择符
这又是令人头疼的“名词”，到底什么是“伪类”、“伪对象”呢？到底“伪”在哪里呢？我们依然从一个大家都用过，很熟悉的示例说起：
<!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">
<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>设置伪类样式
0
投稿猜你喜欢
python绘制简单彩虹图
简单谈谈Python中的模块导入
百度首席设计师 用户体验部总监郭宇演讲
python实现共轭梯度法
javascript实现多栏闭合展开式广告位菜单效果实例
基于Python编写一个简单的端口扫描器
详解mysql建立索引的使用办法及优缺点分析
python Celery定时任务的示例
Python os和os.path模块详情
国产化设备鲲鹏CentOS7上源码安装Python3.7的过程详解
Go使用Gin+mysql实现增删改查的详细实例
python实现定时播放mp3
pygame学习笔记（4）：声音控制
Python threading中lock的使用详解
ACCESS入门教程：初识Access 2000
golang中的时间格式化
Python实战之自动发送邮件的实现
怎么使用pipenv管理你的python项目
Vue之插件详解
利用Python库Scapy解析pcap文件的方法
