• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 学习超级链接A标记

学习超级链接A标记

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含等相关知识,佚名 希望在学习及工作中可以帮助到您

问:
我已经使用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的地位也是非常重要的,多看资料,多练习,多来微课江湖!如果你喜欢本站就代为宣传吧!谢谢阅读

您可能想查找下面的文章:

相关文章

  • 2017-08-05HTML减肥 精简HTML标记制作网页
  • 2017-08-05在dreamweaver中使用zen coding的方法
  • 2017-08-05textarea的disabled与readonly属性具体用法介绍
  • 2017-08-05关于html中meta的作用(网上搜集整理得来)
  • 2017-08-05html中radio值的获取、赋值、注册事件示例详解
  • 2017-08-05label标签使用过程中遇到的问题分析及解决思路
  • 2017-08-05HTML DOCTYPE的缩写
  • 2017-08-05a标签href属性和onclick事件的比较介绍
  • 2017-08-05概述页面中浮动与清除浮动
  • 2017-08-05html网页中meta viewport属性说明

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML 文本格式化的简单实例(详解)
    • 链接A的语义、写法和最佳实践
    • 表格单元格td设置宽度无效始终有内部的内容撑开
    • html滚动条 textarea属性设置
    • Html+CSS绘制三角形图标
    • 如何弹出QQ临时对话框实现不添加好友在线交谈效果
    • 借助HTML分别禁用IE8, IE9的兼容视图模式的小技巧
    • HTML网页列表标记学习教程
    • HTML的表单form以及form内部标签的使用
    • 动态加载html后,点击获取焦点

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有