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}

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

复制内容到剪贴板

代码:

<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>

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

时间: 2024-09-20 12:36:13

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 伪类这个词很奇怪, 在我看来更像标识了特殊状态的标签. 和程序中的类什么的, 一点关系都没有. 伪类用:跟在选择器后面,标识了一些状态 ::表示 css3 新增的一些伪类, 建议全部都使用::.这年头还不支持 css3 的浏览器可以不管了 比如这几个伪类: link 链接还没被用户点击 visited 已经点击的链接 hover 鼠标指针悬停在链接上 active 链接正在被点击(鼠标在元素上按下,还没有释放) ::first-letter 给我感觉更像一个增强选择器 p::first-

css教程:CSS伪类

CSS pseudo-classes are used to add special effects to some selectors. CSS伪类可用来给一些选择器加上特殊效果. Hyperlink 如何在文档内给超级连接加上不同的颜色 This example demonstrates how to add different colors to a hyperlink in a document. Examples 实例:  代码如下 复制代码 Source Code to Run []

CSS伪类:before, :after详解

 代码如下 复制代码 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>伪类导个航..</title> <style type="text/css"> /*css部分, 留意其中border, marg

CSS伪类选择器nth

网页制作Webjx文章简介::nth-child()工作原理. 这是一个css选择器,一个真正的伪类选择器,它就是nth-child(),下面是使用它的范例.ul li:nth-child(3n+3) {color: #ccc;} 上面的css是干什么用的,它就是在无序列表里面选择是3倍数的列.也就是第3个,第6个,第9个等等.但是它工作原理是怎样的那?如果遇到其它情况你又如何使用nth-child那? 总的来说nth-child()圆括号里面支持两个关键词:even与odd.他们应该很明显的,

css伪类伪元素域高级选择器的介绍

 给链接定义样式 a:link 表示尚未访问的链接,鼠标未划过和点击 a:visited 表示已经访问的链接 a:hover 表示鼠标划入的链接 a:active 表示激活的链接,也就是鼠标点击链接的一瞬间 注意上面这四个链接的伪类在使用的时候要有一定的顺序,即上面列举的顺序,否则看不到效果.可以简单记为LOVE(包含link和visited首字母)和HATE(包含hover和active的首字母). 给段落定义样式 :first-letter 为一行中的第一个字符创建样式 :first-lin

CSS中级教程&amp;nbsp;CSS伪类

伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态.它们的形式是selector:pseudo class { property: value; },简单地用一个半角英文冒号(:)来隔开选择符和伪类. CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的伪类. link用在为访问的连接上. visited用在已经访问过的连接上. active用于获得焦点(比如,被点击)的连接上. hoverhover用于鼠标光标置于其上的连接.  代

CSS伪类:hover&amp;nbsp;在IE中使用及其BUG

原文作者:Blank 怿飞 伪类:hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单.相册效果等等. 或许用了这么久的伪类:hover,还有部分朋友还不完全了解hover的规则: 在CSS1中此伪类仅可用于a对象.且对于无href属性(特性)的a对象,此伪类不发生作用. 在CSS2中此伪类可以应用于任何对象. 但目前IE5.5.IE6仅支持CSS1中的:hover,不过新出的IE7是支持CSS2中的:hover. 当我们用伪类: