前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结

前端 CSS：锚伪类选择器:hover,:active，:visited;等用法总结
锚伪类选择器:hover,:active，:visited;等用法总结

一、什么是锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}      /* 未访问的链接 */

a:visited {color: #00FF00}   /* 已访问的链接 */

a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */

a:active {color: #0000FF}    /* 选定的链接 */

 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

所以它的顺序是

                          a:link ； a:visited a:hovera:active

提示：伪类名称对大小写不敏感。

二、锚伪类选择器是否只能用于a标签？

不是的，关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

现在主流浏览器：

                 1、伪类选择器:hover 和:active; 可以用于所有元素2、a标签专用 :vistied；:link;

三、伪类选择器hover的巧妙用法

a标签里一张图片：

<div>
<a href="#">
<img alt="i am an img" src="img.jpg"/>
</a>
</div>

一般hover这个css伪类对于除a标签外的标签是不起作用的（IE6下不可以）：如下

img:hover{
border:1px solid #000;/*FF下有效果,IE6下没有效果*/
}

采用声东击西方法,如下写:

a:hover img{
border:1px solid #000;/*可以理解为鼠标在其上的a里面的img标签*/
}

前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结相关推荐

笔记：CSS伪类选择器hover link visited active
:hover选择器 :用于选择鼠标指针悬浮在上面的元素. (可用于所有元素,不单单只限于链接) :link选择器 :用于设置指向未被访问页面的链接的样式. :visited选择器 : ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...
Css 结构伪类选择器
目录 Css 结构伪类选择器结构伪类-公式 Css 结构伪类选择器在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
css基础伪类选择器与选择器权重以及盒子模型的用法演示
1. 伪类选择器根据元素的位置或状态来匹配子元素 1.1 结构伪类与上下文选择器很相似后文演示所用 HTML 代码如下: <!DOCTYPE html> <html lang= ...
CSS 语言伪类选择器
语言伪类选择器,用来匹配使用指定语言的元素.对使用多语言版本的网站,可以根据不同语言版本,设置不同的样式. 表 2-9 语言伪类选择器选择器功能描述版本 E:lang(language) 选择使 ...
CSS结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁. 表 2-6 结构伪类选择器选择器功能描述版本 E:last-chi ...
CSS常用伪类选择器详解
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素. 应用场景: 鼠标经过元素时的样式变化,Tips提示,下拉列表和过渡动画等细节优 ...

前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结

一、什么是锚伪类

二、锚伪类选择器是否只能用于a标签？

三、伪类选择器hover的巧妙用法

前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结相关推荐

最新文章

热门文章