伪类link,visited,hover,focus,active

     CSS 又名 层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，所以在样式表中，
各样式排列的顺序很有讲究。 :link 与 :visited 在样式文件中的顺序可以随便放置。而focus， hover，active这几个，如果你设置的顺序不同，会直接影响样式的显示效果，
下面会详细解释。这边我就不上代码一一例举了，我直接上一段正确的样式代码，大家可以直接去测试，变换位置去思
考一下，基本就懂了，不懂的可以来找我探讨。## css<style>a:link{color:chartreuse}a:visited {color: blueviolet;}a:hover{color:aqua}button:hover {background-color:aqua;}a:focus{color:blue}button:focus {background-color:blue;}a:active{color:red}button:active {background-color:red;}</style>## html<body><div class="layui-fluid"><a href="##" style="font-size:220px;">ws </a><button class="layui-btn aa">我是按钮</button><button class="layui-btn">123</button></div></body>
这边是引入的layui的css  让按钮变得好看一点。

总结：
link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。

visited表示链接被点击后显示的颜色。

hover表示鼠标悬停时显示的颜色。

focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用（鼠标松开时显示的颜色）。

active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。

#注：伪类的顺序应为link–visited–hover–focus–active。
不懂的地方可以留言交流~~

伪类link,visited,hover,focus,active相关推荐

锚伪类link、hover、active、visited
锚点伪类锚点链接的伪类主要针对于我们a标签样式进行设置,下面给出四个标签作用 link标签:未被访问过的链接 hover 应用于鼠标悬停到的元素 active 应用于被激活的元素 visited 应 ...
【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link.:hover.:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点 ...
:link、:hover、:active和:visited的区别
前言直到如今,前端一直都是我的弱项,想要总结自己前端都学了什么,可是真的想写的时候,却发现自己会的真的是好少.既然如此,就随性一点,想到哪里记到哪里吧. 首先,这四个选择器叫伪类选择器,一般用在a标 ...
css复合选择器（后代选择器、子代选择器、并集选择器、链接伪类选择器、：focus选择器）
什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...
伪类（：hover，：before，：after，：focus）
一:伪类伪类是可以添加到选择器上的关键字,用来选择元素的指定(悬停)状态. 1.:hover 超链接可以使用:hover伪类选择器定义它的悬停状态样式. 链接现在为黑色,当鼠标移到a时,会显示红色: ...
伪类选择器之hover
1.表示鼠标移入时候发生的状态改变(选择器:hover{}) 2.使用: (1)改变自己------当前自己的选择器:hover{} (2)通过父级改变子级------父级选择器:hover 子级选择 ...
HTML/CSS: 浅谈a标签及伪类选择器
1.基础知识 "超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分." -HTML链接而对于超文本,简单的说便是 ...
a元素和它的多重人格以及伪类
下面的span当鼠标悬停在上面的时候背景色会改变,代码如下所示 1.样式方面,链接表现得稍有些不同.链接是元素世界的变色龙,取决于具体环境,会瞬间改变样式 2.主要是根据状态改 ...
伪元素写竖线_CSS的伪类和伪元素
之前介绍了8种选择器,基本上可以应对大部分的开发需求,但是如果不会使用伪类和伪元素,就跟下面的图差不多,后面会摔的.伪元素和伪类虽然不是特别常用,但是,很好用,可以帮你省掉很多无用功,效果还好.下面直 ...

伪类link,visited,hover,focus,active

伪类link,visited,hover,focus,active相关推荐

最新文章

热门文章