讯雷在线资源影视合作伙伴
 
站内留言 会员登陆 会员注册 最新动态>>本站由于版面真在大面积改动中,对信息资源,影视资源,资源下载有很大的影响,给您带来的不便请谅解!
您的位置海淀信息港 > 文章中心 > 技术联盟 > 网站技术 > 文章内容

详细讲解CSS特殊选择符伪类的应用技巧

2008-7-27 17:23:23  来源:本站整理  作者:佚名 【 查看评论

伪类可以看做是一种特殊的类选择符,是能被支持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}

现在应用在不同的链接上:

<a class="red" href="...">这是第一组链接</a>

<a class="blue" href="...">这是第二组链接</a>

4. 其他伪类

此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。

下面看这个例子,我们在段落标记里定义文本首字尺寸为默认大小的3倍:

<style type=”text/css”>

p:first-letter {font-size: 300%}

</style>

……

<p>

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

</p>

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

<style type=”text/css”>

div p:first-line {color: red}

</style>

……

<div>

<p>

这是段落的第一行

这是段落的第二行

这是段落的第三行

</p>

</div>

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

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

站点推荐
  • 翟志刚在太空中挥动...
  • 48名少女拍裸照时被...
  • 液态奶促销“...
  • 北京艺人涉毒裹挟少...
  • 一13岁少女遭八男子...
  • 16岁少女与继父产子...
  • 网民发帖骂人,网站...
  • 英国3岁男孩拨打99...
(评论内容只代表网友观点,与本站立场无关!)[ 全部评论 ]

网友评论:

    用户名:

    评   分:100分 85分 70分 55分 40分 25分 10分 0分

    

                 (注“”为必填内容。) 验证码: 验证码,看不清楚?请点击刷新验证码

关于本站 - 网站导航 - 广告服务 - 网站地图 - 下载声明 - 友情链接 - 免责申明