CSS入门了解CSS的伪类
发布时间:2007-10-24 19:36:00
类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属性,所以此类选择符叫类选择符。在CSS中样式通常依附与一个元素在文档树中的位置,这个简单的模型对于许多情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构。例如,在HTML中,没有元素能够引用一个段落的第一行,所以也没有简单的CSS选择符应用它。所以,CSS引进了伪类(pseudo-class)和伪元素(pseudo-element)来允许基于文档树意外信息的格式化。
第一种:selector:pseudo-class {property: value} 也可以用HTML的class属性来设定伪类。
例句:
以下是引用片段:
a:link {color:red}
第二种:selector.class:pseudo-class {property: value} 伪类是最常用的伪类。
例句:
以下是引用片段:
a.c1:link {color:red}
锚(a)伪类
CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的伪类。锚(a)伪类是最常用的伪类。例句如下:
以下是引用片段:
a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
也可以用HTML的class属性来设定伪类。例句如下:
以下是引用片段:
a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
例句:actived的顺序书写。
注:由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。
注意
尽管CSS给予你绕开的控制权,用不同的颜色表示已经访问过的连接是一个很好的习惯,因为很多用户还是这样预期的。伪类(除了hover)不常用,恐怕也没有过去常用。因此,它没有过去那样有用了。但如果你能收集常用用户的意见,你会发现应该使用它。
传统上,连接文本是蓝色的,已访问的连接是紫色的。也许,这是最有效、最有用的颜色。然而,伴随着CSS的广泛发展,这种颜色不会是平常的了,用户也不再假设连接必须是蓝色或紫色的。
还应注意
你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是,Internet Explore并不支持。这真是一个极大的烦恼,因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快。
猜你喜欢
- 一.Memory Dumps 1).Global Area ALTER SESSION SET EVENTS ‘immediate trac
- 语法:CREATE TRIGGER trigger_name trigger_time trigger_eventON tbl_name F
- 一个不错的二级联动下拉菜单源码,您一定会用得到的。运行代码:<html><head><title>Lis
- 原文:http://blog.rexsong.com/?p=746#comments加速的关键,不是降低重量,而是减少个数。如果重量在200
- 4款JavaScript放大镜特效脚本。准确的说,Anythingzoomer和Bezoom才是正宗的放大镜特效,当鼠标悬浮在图片上时,能放
- 昨天又翻了下前段时间WD内部培训的幻灯片,发现了kejun推荐的一篇好文:Javascript Closures,看了之后受益匪浅。这篇文章
- 随机背景--当你每次进入该页面时,从已指定的图片文件夹中,随机选取一个图片作为背景显示。这里介绍的方法是用ASP+CSS来实现的。 &nbs
- 对于windows平台来说安装完MySQL后,系统就已经默认生成了许可表和账户,你不需要像在Unix平台上那样执行 mysql_instal
- if rs.bof then 表示:当前指针的位置是在第一行记录之前 if rs.eof then 表示:当前指针的位置是在最后一行记录之后
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们可以通过export with rows=no来得到,但它的输出因为格式
- 哲学上有种说法,“运动是绝对的,静止是相对的”。我们在编写各样的效果时,时常会碰到动画。下面的章,将讨论动画的原理以及实现。动画,简而言之就
- 在ASP中,除了ADODB、Scripting 等一些常用组件外,我们还可以用微软的ActiveX方法来轻松捕获哟: <%u
- 1. document.form.item 问题 (1)现有问题:现有代码中存在许多 document.formName.item(&quo
- 目前计算机中用得最广泛的字符集及其编码,是由美国国家标准局(ANSI)制定的ASCII码(American Stand ard C
- 1.我在一行结束后按回车键,就跳到隔一行的段落上,如何避免隔行跳到下一段落? A.在一行结束后先按着[Shift]键,再按回车就可以不隔行跳
- 英文的文档在这里,详细全面,本文仅为自己的学习笔记,只是试图通过转述加深自己的学习,不详细不全面。由于浏览器之间的差异,所以在JS中监听事件
- Application Name(应用程序名称):应用程序的名称。如果没有被指定的话,它的值为.NET SqlClient Data Pro
- Opera, 作为 A-Grade 浏览器,在现在的前端开发中务必支持。它很优秀,很不幸,bug是每个浏览器都不可避免的问题,Opera亦难
- 首先,我们会document里添加mouseover事件时在HTMLElement上飘一个absolute的容器,设置border。接着,m
- gchart:基于google图表API的jquery组件全攻略——入门gchart是基于google图表API的jquery组件。使用gc