专注网络安全|安全运维|建站技术|黑客教程|资源分享等综合站长学习平台
老龙博客

网站首页 建站技术 前端技术 正文

a标签的伪类选择器使用顺序

老龙 2021-03-31 前端技术 137 ℃ 0 评论

当遇到选择不同的选择器,选中同一个元素时并且设置相同的样式时,样样式之间就会产生冲突,如何选择定义的样式,由选择器的优先级(权重)来决定,优先级高的优先显示。

优先级的规则:

  • 内联样式,优先级1000

  • id选择器,优先级100

  • 类和伪类,优先级10

  • 元素选择器,优先级1

  • 通配选择器,优先级0

  • 继承的样式没有优先级

伪类顺序

常用伪类.png a标签的伪类选择器使用顺序  a标签 伪类选择器 第1张

涉及到的a标签伪类常用的有四个:

  • :link

  • :visited

  • :hover

  • :active

这四个选择器的优先级是一样的。

链接被访问之前选中

点击复制代码 a标签的伪类选择器使用顺序  a标签 伪类选择器 第2张 CSS
a:link {color: #FF0000;}

链接被访问之后选中 

点击复制代码 a标签的伪类选择器使用顺序  a标签 伪类选择器 第2张 CSS
a:visited {color: #000000;}

鼠标悬停被选中 

点击复制代码 a标签的伪类选择器使用顺序  a标签 伪类选择器 第2张 CSS
a:hover {color: #008000;}

链接被按下之后 

点击复制代码 a标签的伪类选择器使用顺序  a标签 伪类选择器 第2张 CSS
a:active {color: #FFFF00;}

注意

由于样式的叠加特性和用户的操作顺序影响

以上四个伪类选择器在书写时尽量按照link vistied hover active的顺序来书写。


Tags:a标签伪类选择器

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

搜索
最近发布
标签列表
站点信息
  • 文章总数:102
  • 页面总数:3
  • 分类总数:29
  • 标签总数:275
  • 评论总数:6
  • 浏览总数:10037