您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

Html元素A的css样式的状态hover、focus、active、link、visited详解

时间:06-27来源:作者:点击数:
  CSS又名层叠样式表,是一种伪类用于向某些选择的容器添加特殊的效果,所谓层叠,就是后面的样式会覆盖前面的样式,所以不同的排列顺序可能会有不同的显示效果。下面介绍几个关于连接按钮效果的关键样式属性:
  
  1. link控制未访问时的显示效果  
  2. hover鼠标悬停和划过时的显示效果  
  3. visited访问过后的显示效果  
  4. active控制按钮被点击时的显示效果  
  5. focus获得聚焦对象的元素,并设置聚焦时的显示效果
  
  link 与 visited在样式文件中的顺序任意,相互之间没有影响。而focus,hover,active这这三个的顺序有要求,乱放后可能会出现显示的效果与预想的不同,正常顺序为:focus -> :hover -> :active
  
  link代表为访问链接的样式,所以只要你是超链接,且未被访问过,则链接都会按照你设定的样式显示,所以它的位置顺序无所谓。
  
  visited代表链接访问后的样式,则链接一旦被访问,则之后它的样式就会是你所设置的visited样式
  
  focus代表的是获取焦点时的样式,有人说啥是获取焦点时的样式,可以通过tab键来查看,一旦链接获取了焦点,则它的样式就是你设置的focus样式
  
  hover代表的是你光标经过某一元素时的样式,如果将此样式放在:focus之后,则当链接获取焦点时,显示:focus样式,当光标经过此链接时,会显示hover的样式,而将其放在focus前,则当鼠标滑过时显示的时focus的属性,因为其特性被覆盖了。
  
  active代表元素被激活时的样式,也就是元素被按下时的样式,如果:active选择器与:focus,:hover调换位置,则显示的效果也会不同,因为排在后面的样式,会覆盖前面的样式。
  
  
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门