喜欢本站并加入收藏
首 页 电脑学园 技术文档 图形图像 办公应用 网页设计 管理资料 PPT模板 方案合同
 位置: 北方教程网 >> 网页设计 >> DIV/CSS >> 正文
   CSS特殊选择符伪类应用技巧介绍
CSS特殊选择符伪类应用技巧介绍
[ 作者:佚名   来源:网络整理   点击数:   更新时间:2007-5-16 ]
关于CSS中的伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

1. 语法

伪类的语法是在原有的语法里加上一个伪类(pseudo-class):
selector:pseudo-class {property: value}
(选择符:伪类 {属性: 值})
伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式。

类选择符及其他选择符也同样可以和伪类混用:
selector.class:pseudo-class {property: value}
(选择符.类:伪类 {属性: 值})

2. 锚的伪类

我们最常用的是4种a(锚)元素的伪类,它表示动态链接在4种不同的状态:link、visited、active、hover(未访问的链接、已访问的链接、激活链接和鼠标停留在链接上)。我们把它们分别定义不同的效果:

a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
(上面这个例子中,这个链接未访问时的颜色是红色并无下划线,访问后是绿色并无下划线,激活链接时为蓝色并有下划线,鼠标在链接上时为紫色并有下划线)
注意:有时这个链接访问前鼠标指向链接时有效果,而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面,这样的话由于后面的优先级高,当访问链接后就忽略了a:hover的效果。所以根据叠层顺序,我们在定义这些链接样式时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。

3. 伪类和类选择符

将伪类和类组合起来用,就可以在同一个页面中做几组不同的链接效果了,例如,我们定义一组链接为红色,访问后为蓝色;另一组为绿色,访问后为黄色:

a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
现在应用在不同的链接上:

这是第一组链接
这是第二组链接

4. 其他伪类

此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。
下面看这个例子,我们在段落标记里定义文本首字尺寸为默认大小的3倍:


……


这是一个段落,这个段落的首字被放大了。


我们再定义一个首行样式的例子:


……



这是段落的第一行
这是段落的第二行
这是段落的第三行



(上例中段落的第一行为红色,第二、三行为默认颜色)

注意:首字和首行的伪类需要IE5.5以上的版本支持。

上一篇文章: 详解网站DIV+CSS优化与布局 下一篇文章: 学好用好CSS选择符的小技巧
打印此文  收藏此页  关闭窗口  返回顶部
 相关文章  热点文章
 · 利用CSS改进网站设计的小技巧
 · Dreamweaver快捷操作技巧集锦
 · 使用Dreamweaver架设网站简明教程
 · 网页设计制作过程中常用的几个代码技巧
 · 高效使用CSS编码的方法
 
热点图文
教你节省Vist...
使用Windows ...
 · 远程管理Web服务器的方法技巧
 · Win Vista系统自带IIS7.0设置详解...
 · 详解Windows系统IIS6.0功能及应用...
 · 服务器集群系统实现方法及案例分...
 · IIS服务器实现asp,cgi和php+mysq...
 · IIS下SQL Server数据库安全设置技...
推 荐 阅 读
巧用Photosho...
Photoshop鼠绘...
 · Fireworks制作旋转的漂亮gif动画...
 · Photoshop制作都市满天繁星
 · Fireworks制作Menu按钮
 · 巧用Photoshop制作喜迎奥运壁纸
 · 巧用Photoshop钢笔工具绘制彩色美...
 · Photoshop制作浪漫动感花朵
 设为首页 - 加入收藏 - 关于本站 - 联系我们 - 广告合作 - 友情链接 - 在线交流 - 
CopyRight© 2006-2009 Eduai.Com All Rights Reserved
在线交流 QQ:524152258 辽ICP备07001851号
免责声明:本站部分资源来自网络,如有侵犯您的版权请通知,我们立即删除。