[07/07][教程]小诗老师来讲CSS伪类(pseudo-class)
和一般的CSS语法不同CSS伪类的语法有两种。<br>
第一种：
selector:pseudo-class {property: value}
<br>
例句：
a:link {color:red}
<br>
第二种：
selector.class:pseudo-class {property: value}
<br>
例句：
a.c1:link {color:red}
锚(a)伪类
锚(a)伪类是最常用的伪类。例句如下：
a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00}/* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
<br>
也可以用HTML的class属性来设定伪类。例句如下：
a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00}/* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
<br>
注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。
<br>
1. CSS代码示例-锚(a)伪类(pseudo-class)示例：为HTML超链接的不同状态设定CSS：
<html>
<head>
<title>CSS伪类 pseudo-class</title>
<style type="text/css">
a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00}/* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
</style>
</head>
<body>
<a href = "http://www.xyhc.com/viewthread.php?tid=666964&extra=page%3D1">欢迎光临小诗的PP贴</a>
</body>
</html>
<br>
其中：<a href = "这里写网址">这里写标题</a>
<br>
<br>
<br>
2. CSS代码示例-锚(a)伪类(pseudo-class)示例：为HTML超链接的不同状态设定CSS，用到a的class属性<br>
<html>
<head>
<title>CSS伪类 pseudo-class</title>
<style type="text/css">
a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00}/* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
</style>
</head>
<body>
<p><a class = "c1" href = "http://www.xyhc.com/forumdisplay.php?fid=165&page=1">欢迎光临会员风采区</a></p>
<p><a href = "http://www.xyhc.com/viewthread.php?tid=666964&extra=page%3D1">欢迎光临偶的PP贴</a></p>
</body>
</html>
<embed src="http://www.zhaoqt.net/bs/yinyue/Sorry%20Seems%20to%20Be%20the%20Hardest%20Word.wma" width=0 height=0 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types>
<BR><BR>
<DIV align=left>
<P><fieldset style="width:350" align="center">
<legend><font size=4>效 果 </font></legend>
<html> <head> <title>CSS伪类 pseudo-class</title> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FFCC00}a:active {color: #0000FF}</style> </head> <body> <a href = "http://www.xyhc.com/viewthread.php?tid=666964&extra=page%3D1">欢迎光临小诗的PP贴</a> </body> </html>
</fieldset></P><BR>
<P><TEXTAREA rows=7 cols=80>
<html> <head> <title>CSS伪类 pseudo-class</title> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FFCC00}a:active {color: #0000FF}</style> </head> <body> <a href = "http://www.xyhc.com/viewthread.php?tid=666964&extra=page%3D1">欢迎光临小诗的PP贴</a> </body> </html>
</TEXTAREA></P></DIV><BR>
[ 本帖最后由 月儿 于 2006-7-9 23:28 编辑 ] 吖。。看的出小诗很认真在学哦过不了小诗就超厉害的说 恩恩 偶可以放心拉 ……哈哈，偶买了一本代码书看，现在悠闲在家学代码也8错！ 吖。。有书的哦？ 恩 过段时间我不能上网了 也看书 叫什么名字？ 原帖由 绯舞 于 2006-7-7 11:03 发表
吖。。有书的哦？ 恩 过段时间我不能上网了 也看书 叫什么名字？
叫《网页制作范例》，里面有一章专门谈了代码哦~！舞舞过段时间去哪呀？ 去旅行 哇？这时候去旅行哦？偶要能去就好了，顺便写生 恩 去比较凉快的地方就行拉 嘿嘿 现在还没决定去哪里 趁现在8上班，偶也出去玩去，恩恩，决定了 偶只能放暑假 寒假的时候去玩一下都不是好日子 不素太热就素很冷 55555
<br>PS：把这贴给水了 小诗莫怪莫怪嘿嘿^^
页:
[1]
2