CSS中级教程 CSS伪类

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

 代码如下 复制代码
a.snowman:link { 
color: blue; 

a.snowman:visited { 
color: purple; 

a.snowman:active { 
color: red; 

a.snowman:hover { 
text-decoration: none; 
color: blue; 
background-color: yellow; 

注意
尽管CSS给予你绕开的控制权,用不同的颜色表示已经访问过的连接是一个很好的习惯,因为很多用户还是这样预期的。伪类(除了hover)不常用,恐怕也没有过去常用。因此,它没有过去那样有用了。但如果你能收集常用用户的意见,你会发现应该使用它。
传统上,连接文本是蓝色的,已访问的连接是紫色的。也许,这是最有效、最有用的颜色。然而,伴随着CSS的广泛发展,这种颜色不会是平常的了,用户也不再假设连接必须是蓝色或紫色的。
注意
你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是,Internet Explore并不支持。这真是一个极大的烦恼,因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快。

时间: 2024-09-01 15:20:23

CSS中级教程 CSS伪类的相关文章

CSS中级教程 class和id选择符

在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现. 你当然可以用类选择符class和标识选择符id来定义自己的选择符. 这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素. 在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前. 看起来像这样:  代码如下 复制代码 #top {  background-color: #ccc;  padding: 1em  }  .intro {  color: red;  fon

CSS中级教程 组合与嵌套

组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了. 比如,你有如下的代码:  代码如下 复制代码 h2 {  color: red;  }  .thisOtherClass {  color: red;  }  .yetAnotherClass {  color: red;  }  则你可以这样写: h2, .thisOtherClass, .yetAnotherClass {  color: red;  }   嵌套 CSS结构好的话,没有必要使用过多的类或者标

CSS中级教程 背景图片

应用xhtml+css进行网页布局,有很多属性跟背景图片的操作相关.很多表现因素上的图片,大部分用背景来进行处理.CSS的background的属性可以全部处理它们. body { background: white url(images/bg.gif) no-repeat top right; } 这是如下属性的组合: background-color,在前面我们已经说过了.background-image,图片的存储位置.background-repeat,图片如何平铺.可以是 repeat

CSS技巧教程:让CSS代码更具有易维护性

如何让你的CSS代码更具有组织性和易维护性,为什么你的样式表总是臃肿和混乱的?有些时候是源于一开始书写时的混乱和草率,有时候也是因为后期的维护和各种HACK的需要,但不管如何,书写出干净.易于管理的CSS很简单,下面是10条改进的方法:1.井井有条.和许多其他的事情一样,首先要保持一个良好的组织性,而不是想到ID就写ID,想到CLASS就写CLASS,而要使样式表保持一个连贯的结构,这能让你充分的利用样式的继承.首先定义你最常用的项目,然后是不太常用到的然后是其他,这会使你的CSS属性得到正确的

【DIV+CSS入门教程】CSS选择器规范化命名

规范的命名也是Web标准中的重要一项,标准的命名可以更好的看懂代码,我想大家应该都有这种经历,某日翻出自己过去写的代码居然看不懂了,呵呵,为了避免这种情况我们就要规范化命名,再说了,现在一个项目不是一个人就可以完成的,是需要大家互相合作的,如果没有规范化命名,别人就无法看懂你的代码,大大降低了工作效率,所以必须规范化命名,这样还显着咱专业! 好了不多说了,关于CSS命名法,和其他的程序命名差不多,也是有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法. [骆驼命名法] 说到骆驼大家肯定会想到它那明显

【DIV+CSS入门教程】CSS如何控制页面

本节主要讲解,两个内容, 第一:CSS如何控制页面样式,有几种方式: 第二:这些方式出现在同一个页面时的优先级. 使用xHTML+CSS布局页面,其中有个很重要的特点就是内容与表象相分离,内容指HTML页面代码,表象就是CSS代码了,如果把页面看成穿着衣服的人的话,人就是HTML,是内容,而衣服呢就是CSS,是表 象,现在出现的问题是,如何让CSS去控制页面?或者说,如何让衣服穿在人身上,好体现出人得风格特点:不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现

怎么利用jquery修改css content伪类中的内容

问题描述 怎么利用jquery修改css content伪类中的内容 html内容: css: .icon-menu:before { content: "f0da"; } jquery代码: $("#icon").css("content",'"f0d7"');$("#icon"). 我想利用jquery把content中的内容改成content: "f0d7";,求助大神解答,我利用

《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元素,代码如下

学习网页技术CSS高级教程之CSS 伪元素

css|高级|教程|网页 CSS 伪元素被用来将特殊的效果添加到某些选择器. CSS 伪元素 (Pseudo-elements)实例: 制作首字母特效 本例演示如何向文本的首字母添加特效. <html><head><style type="text/css">p:first-letter {color: #ff0000;font-size:xx-large}</style></head><body><p>