超级实例详细讲解超级连接的四种状态的应用

问:

我已经使用CSS定义了超链接的样式,但是浏览时hover(鼠标悬停)却不起作用。为什么会这样?是浏览器的问题吗?

答:

虽然你认为可能原因是浏览器问题,但是更多的可能是你样式定义时顺序错误。为了保证能看到不同状态下的连接样式,正确的样式顺序应该是:

" link - visited - hover - active "或" LVHA "(缩写)。

核心内容:

每个选择符selector都有一个“specificity”如果两个selectors应用于同一个元素,具有较高specificity的选择符将胜出,具有优先权。例如:

P.hithere {color: green;} /* specificity = 1,1 */
P {color: red;} /* specificity = 1 */

任何设置了类class=hithere的段落内容显示为绿色而不是红色。两个selectors都设置了颜色,但是具有更高specificity的选择符将胜出。

伪类如何影响specificity呢?它们具有完全相同的加权值,下列样式具有相同的specificity加权值:

A:link {color: blue;} /* specificity = 1,1 */
A:active {color: red;} /* specificity = 1,1 */
A:hover {color: magenta;} /* specificity = 1,1 */
A:visited {color: purple;} /* specificity = 1,1 */

这些都是用于超链接的样式设置。大部分情况下需要同时设置其中的几个样式,例如,一个未被访问的超链接在鼠标悬停和点击时可设置“鼠标悬停”和“鼠标激活“两种状态下的不同样式,由于上述三个规则都可应用于超链接,并且全部选择符具备相同的specificity,那么根据规则,最后一个样式“胜出”。所以" active "式样永远也不会显示出来,因为它总是被" hover "式样覆盖(即" hover "优先)。现在再来分析一下已经被访问过的超链接鼠标悬停是什么效果,结果永远是purple紫色的:( ,因为它的" visited "式样总是优先于其它的状态样式规则(包括" active "和" hover")而显示。

这就是为什么CSS1推荐样式顺序的原因:

A:link
A:visited
A:hover
A:active

实际上,开头两个样式的顺序可以调换,因为一个超链接不可能同时存在“未访问”和“已访问”两种状态。( :link意思是" unvisited ";我不知道为什么不这样定义呢.)

CSS2现在允许伪类可以以“联合成组”形式出现,例如:

A:visited:hover {color: maroon;} /* specificity = 2,1 */
A:link:hover {color: magenta;} /* specificity = 2,1 */
A:hover:active {color: cyan;} /* specificity = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict. You can get hover-active combinations, for example.

如何理解本文当中所涉及到的“specificity”呢?specificity可以理解未简单地连在一起的号码字符串,上面的一个例子:
P.hithere {color: green;} /* specificity = 11 */
P {color: red;} /* specificity = 1 */

这好像是一个基于十进制的简单运算。然而计算“specificity”不能使用十进制算法,例如你把15种选择符连在一起使用、它们具有的“specificity”加权值还是比简单的class选择符低。举例:

.hello {color: red;} /* specificity = 10 */
HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = 15 */

" 10 "实际上是一个“1”后面接着“零”、不是"十",我们可以使用十六进制描述前面的样式规则的specificitiy,像下面:

.hello {color: red;} /* specificity = 10 */
HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = F */

唯一的问题是如果你想为第二个样式规则增加两个或更多的选择符时,那时你就可能得到一个“17”的specificity、会再一次混淆。事实上specificity可能是无穷大的,所以为了避免更多的混乱,建议使用逗号来分隔specificity的值。

站长建议:反复练习specificity的加权值的计算,网站CSS的设置体现了你控制页面的能力,在动态网站开发中,CSS的地位也是非常重要的,多看资料,多练习,多来网页教学网!如果你喜欢本站就代为宣传吧!谢谢阅读。

时间: 2024-08-12 12:54:52

超级实例详细讲解超级连接的四种状态的应用的相关文章

对象的四种状态:强、弱、虚、空,哪种会回收?为什么?

问题描述 高手们帮帮忙,这是一道面试题我从来没有听说过对象的这四种状态,有知道的麻烦帮忙解解,万分感谢我的分不多只有用我的真心感谢您了谢谢 解决方案 解决方案二:名词疯狂制造的年代.一般是空对象有机会回收.解决方案三:如果一个对象具有强引用,那就类似于必不可少的生活用品,垃圾回收器绝不会回收它.当内存空间不足,Java虚拟机宁愿抛出OutOfMemoryError错误,使程序异常终止,也不会靠随意回收具有强引用的对象来解决内存不足问题.而对于只具有软引用来说,只有当内存不足时,垃圾回收器才会回收

LoadRunner事务四种状态

LR事务四种状态,在默认情况下使用LR_AUTO来作为事务状态: 1.LR_AUTO LR_AUTO是指事务的状态有系统自动根据默认规则来判断,结果为PASS/FAIL. 2.LR_PASS LR_PASS是指事务是以PASS状态通过的,说明该事务正确的完成了,并且记录下对应的时间,这个时间就是指做这件事情所需要消耗的响应时间. 3.LR_FAIL LR_FAIL是指事务以FAIL状态结束,该事务是一个失败的事务,没有完成事务中脚本应该达到的效果,得到的时间不是正确操作的时间,这个时间在后期的统

实例详细讲解ASP教程之ASP中使用变量的方法

变量|教程 变量用于存储信息. 假如在子程序之外声明变量,那么这个变量可被ASP文件中的任何脚本改变.假如在子程序中声明变量,那么当子程序每次执行时,它才会被创建和撤销 实例: 声明变量 变量用于存储信息.本例演示如何声明变量,为变量赋值,并在程序中使用这个变量 <html><body><%dim namename="Donald Duck"response.write("My name is: " & name)%>&l

tcp连接的几种状态及连接状态详解

TCP连接示意图如下 通常情况下,一个正常的TCP连接,都会有三个阶段:     TCP三次握手;    数据传送;    TCP四次挥手 里面的几个概念:     SYN: (同步序列编号,Synchronize Sequence Numbers)    ACK: (确认编号,Acknowledgement Number)    FIN: (结束标志,FINish) I. TCP三次握手 客户端发起一个和服务创建TCP链接的请求,这里是SYN(J)服务端接受到客户端的创建请求后,返回两个信息:

Spring中@Transactional事务回滚(含实例详细讲解,附源码)

版权声明:本文为博主原创文章,转载注明出处http://blog.csdn.net/u013142781 目录(?)[+] 一.使用场景举例 在了解@Transactional怎么用之前我们必须要先知道@Transactional有什么用.下面举个栗子:比如一个部门里面有很多成员,这两者分别保存在部门表和成员表里面,在删除某个部门的时候,假设我们默认删除对应的成员.但是在执行的时候可能会出现这种情况,我们先删除部门,再删除成员,但是部门删除成功了,删除成员的时候出异常了.这时候我们希望如果成员删

RabbitMQ与java、Spring结合实例详细讲解(转)

         林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka          摘要:本文介绍了rabbitMq,提供了如何在Ubuntu下安装RabbitMQ 服务的方法.最后以RabbitMQ与java.Spring结合的两个实例来演示如何使用RabbitMQ. 本文工程免费下载   一.rabbitMQ简介 1.1.rabbitMQ的优点(适用范围)1. 基于erlang语言开发具有高可用高并发的优点,适合集群服务器.2. 健壮

实例详细讲解JSP访问数据库的方法

js|访问|数据|数据库 JSP(JavaServer Pages)是由Sun 公司倡导.许多公司参与建立的一种动态网页技术标准.使用JSP技术,Web页面开发人员可以使用HTML或者XML标识来设计和格式化最终页面.使用JSP标识(tag)或者小脚本(Scriptlet)来生成页面上的动态内容.生成内容的逻辑被封装在标识和JavaBeans组件中,并且捆绑在小脚本中,所有的脚本在服务器端运行. 数据库连接对动态网站来说是最为重要的部分,Java中连接数据库的技术是JDBC(Java Datab

实例详细讲解ASP生成静态页面方法

1.WITH TEMPLET意思是,生成的页面架构将采用某个已设定的模板,在此之前我的一篇教程中介绍过,希望各位在看本教程之前对ASP采用模板应熟悉下. 2.ASP转变为HTML.不要我再说ASP转变成HTML的好处了吧,其中最值得知道的就是:静态HTML页和动态页对服务器的要求承受能力小得多,同样,静态HTML搜索几率远比动态页面的多得多. 那么,我现在需要处理的技术问题就是: 1.如何实现模板技术? 2.如何实现2HTML技术? 3.如何让模板技术与2HTML技术结合? 一.先进行技术原理分

实例详细讲解DIV+CSS网页制作布局技术

css|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><di