css之伪类和伪元素

http://blog.sina.com.cn/s/blog_53e1227d0100eu8e.html

比如这样的定义就是伪类:a:visited{color:red;},这样的就是伪元素:p:first-letter{color:red;}。

    先说说伪类:伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

    伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式。

    我们最常用的是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的顺序书写。
    现在我们来说说伪元素:在css1中有两个伪元素first-letter和first-line,通过他们可以对元素的首字或首行设定不同的样式。

    比如:我们在段落标记里定义文本首字尺寸为默认大小的3倍:
<style type=”text/css”> p:first-letter {font-size: 300%} </style> …… <p> 这是一个段落,这个段落的首字被放大了。 </p>
    再比如:我们再定义一个首行样式的例子:
<style type=”text/css”> div:first-line {color: red} </style> …… <div> <p> 这是段落的第一行这是段落的第二行这是段落的第三行 </p> </div>
(上例中段落的第一行为红色,第二、三行为默认颜色)

最后请注意:能用于伪类和伪元素的样式有限。

好了,今天就说到这里了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值