Nov 07, 2012 – 学习 & 提升 – 网页设计  CSS  HTML   – Bai

CSS伪类选择器

基本介绍

CSS3 的伪类选择器有多，本文仅讨论状态伪类选择器——:hover、:active、:focus。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效。

  • :hover选择器：当鼠标悬停在所指定的元素上时所使用的样式；
  • :active选择器：当所指定的元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式；
  • :focus选择器：当元素获得光标焦点时使用的样式，主要用在文本框输入文字时使用；

状态选择器最常用的地方就是链接和输入框了。其中的 :focus 伪选择器主要用在键盘操作者进行页面的访问，利用 Tab 键即可查看到当某链接为选定的链接后的效果。

一种现象

在 IE 以及 Firefox 浏览器下，默认情况下，点击链接文字或图片（特指<a>标签下的）时，链接的周围会出现一个虚线框，当鼠标移开，或点击页面其它地方后，此虚线框就消失。

此虚线框对一部分用户来说，尤其是键盘使用爱好者或不得不用键盘的使用者，用处是显而易见的，因为可以直接利用键盘上的 Tab 键在不同的链接之间切换，当切换到某个链接上时，此链接周围就会出现虚线框。没有了此虚线框，对于这些用户来说，网页内容就像一篇纯文本文档，失去了网页的超链接的无穷乐趣。

但是，对于一些应用场合，此虚线框的出现就会严重影响美观程度，试想当点击一张图片准备切换另一张图片时，在图片中间出现一个虚线框，者给图片的欣赏带来很大的影响。此时，就应该在相关的链接上做适当设置，使此虚线框消失，或变的不明显。

解决出现虚线框的办法

消除虚线框

消除虚线框其实很简单，只需要对链接的 outline 属进行相关设置即可。哪到底是对链接标签选择器 a 进行设置，还是对伪类选择器 :hover、:active、:focus 进行设置呢？当然，最好不要直接对标签选择器 a 进行设置，因为这也太绝对化了，直接把所有链接的虚线框都给屏蔽掉了，也就直接把键盘用户给排除掉了，所以最好还是对伪类选择器进行设置。由上文可知 :focus 伪类只要是用于处理聚焦区域的显示，尤其是针对键盘事件的响应，因为键盘切换的原理就是让链接内容获取焦点(focus)的，那么是否应该对此伪类选择器进行设置？即：

a:focus {outline: none;}

但消除聚焦区域的虚线框对于普通用户来说可以很好的解决，但是对于键盘用户仍然无法定位到正确的连接上，从而无法访问链接。

经网上查询，有人做了总结性文章：《CSS-鼠标点击去除外边虚线键盘焦点加上》，称最好将 :active 的 outline 属性进行设置：

a:active {outline: none;}

这样效果或许会好点，虽然在一定的场合虚线框还会出现。

使虚线框表现的不明显

 a:focus { background-color:#f00; }   
 /*或者*/  
 a:hover, a:focus {text-decoration:underline;}

设置焦点被触发时，链接背景为红色等。当然可以根据需要设计出更加复杂的样式，更可以把focus和hover设置成同样的样式。

上一篇：

下一篇：

回顶部