伪类——动态链接

伪类——动态链接

伪类可以看做是一种特殊的类选择符，是能被支持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还定义了[u]首字[/u]和[u]首行[/u]（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>

（上例中段落的第一行为红色，第二、三行为默认颜色）

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

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

文章题目：伪类——动态链接
转载来源：https://www.cdcxhl.com/news30/312030.html

成都网站建设公司_创新互联，为您提供移动网站建设、网页设计公司、品牌网站制作、企业网站制作、网站内链、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联