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的顺序书写。本文来自http://bianceng.cn(编程入门)

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以上的版本支持。

时间: 2024-12-29 05:50:50

CSS中的伪类:动态链接的相关文章

CSS入门:伪类——动态链接

css|动态|链接 伪类--动态链接 伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果. 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class):selector:pseudo-class {property: value}(选择符:伪类 {属性: 值})伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪

CSS语法基础:伪类—动态链接

css|动态|链接|语法 伪类--动态链接 伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果. 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class):selector:pseudo-class {property: value}(选择符:伪类 {属性: 值})伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态

css 伪类——动态链接

伪类--动态链接 伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果. 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class): selector:pseudo-class {property: value} (选择符:伪类 {属性: 值}) 伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式.

CSS中Selection 伪类选择器示例

::selection 伪类选择器用于突出显示的页面用户选择的任何部分,包括可编辑文本字段中的文本. 此伪元素可应用于 color , background-color ,background(background-color 部分) 和text-shadow(注:到目前位置IE下该属性无效)属性.设置其他属性是没有任何效果的. 火狐下需要加-moz-属性前缀: 支持浏览器:Chrome,Firefox (Gecko),Internet Explorer 9+,Opera,Safari 例如:

html-本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题

问题描述 本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题 FIREFOX浏览器,代码如下: HTML代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> @import url(template/default/styl

CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

1.css层叠的含义 后面的会覆盖前面的样式   2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. 大多数都是非替换元素.span中的内容由用户代理.   4.元素间的父子与祖先 如果一个元素在另外一个元素的直接上一层,他们就有父子关系 如果是从一个元素到另外一个元素的路径要经过两层或多层,那这个就是祖先与后代的关系   5.animate的动画叠加解决办法 使用的时候在animate前面

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

前几天遇到一个页面需求是这样的: 一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态. 需求: 没有文字,没有聚焦--点赞 没有文字,聚焦--灰色发送 有文字--红色发送 如果用JS实现,需要监听输入框的change和focus事件,比较麻烦.但是用CSS中的伪类就可以实现相近效果. <input type="text" class="input" required>    <div c

使用CSS3中新的伪类更轻松地定位页面元素

在 Web http://www.aliyun.com/zixun/aggregation/17799.html">开发过程中,开发人员经常会通过使用 CSS 来实现页面所需的样式效果.例如:利用服务器端代码或 JavaScript 脚本生成条纹样式的表格,或为了要为多个页面元素中的一部分添加样式,不得不使用大量带有额外 class 属性的标签. 这些情况在 CSS3 出现后变得非常简单!CSS3 定义了一系列非常神奇的页面元素选择器,通过它们,这个过程将变得简单而迅速.元素选择器是一种模

《HTML 5与CSS 3权威指南(第3版·下册)》——19.3结构性伪类选择器

19.3 结构性伪类选择器 本节介绍CSS 3中的结构性伪类选择器,在介绍结构性伪类选择器之前,先来介绍一下CSS中的伪类选择器及伪元素. 19.3.1 CSS中的伪类选择器及伪元素 1.伪类选择器概述 我们知道,在CSS中,可以使用类选择器把相同的元素定义成不同的样式,如针对一个p元素,我们可以做如下所示定义.p.right{text-align:right}p.center{text-align:right} 然后在页面上对p元素使用class属性,把定义好的样式指定给具体的p元素,代码如下