hover、focus、active、link、visited状态 CSS

这几个是按钮链接效果的样式属性，不同的排列顺序可能会有不同的展示效果，我们先来看他们分别是干嘛的

link：控制未访问时的显示效果。
hover：鼠标悬停和划过时的显示效果。
visited：访问过后的显示效果。
active：控制按钮被点击时的显示效果。
focus：获得聚焦对象的元素，并设置聚焦时的显示效果。

如果运用不起当，会出现失效的情况，下面是这些属性使用时的先后顺序：

link、visited、focus 、hover、active

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 未点时链接色 */a:link {}/* 已点过的链接色 */a:visited {}/* 聚焦时的样式 */a:focus {}/* 鼠标悬停链接上的色 */a:hover {}/* 点击时的样式 */a:active {}
</style><body><a href="#">查看更多</a>
</body></html>

hover、focus、active、link、visited状态 CSS相关推荐

伪类link,visited,hover,focus,active
CSS 又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中, 各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置.而focus, ho ...
【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link.:hover.:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点 ...
:link、:hover、:active和:visited的区别
前言直到如今,前端一直都是我的弱项,想要总结自己前端都学了什么,可是真的想写的时候,却发现自己会的真的是好少.既然如此,就随性一点,想到哪里记到哪里吧. 首先,这四个选择器叫伪类选择器,一般用在a标 ...
锚伪类link、hover、active、visited
锚点伪类锚点链接的伪类主要针对于我们a标签样式进行设置,下面给出四个标签作用 link标签:未被访问过的链接 hover 应用于鼠标悬停到的元素 active 应用于被激活的元素 visited 应 ...
css伪类选择器，:link、:visited、:focus、:hover、:active、:first-child
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪类选择器伪类选择器用于表达在某种状态下的元素. 包括:link.:visited.:focus.:hover.:active ...
[css] 请写出:link、:visited、:hover、:active的执行顺序
[css] 请写出:link.:visited.:hover.:active的执行顺序 :link未访问链接:visited已访问的链接:hover鼠标悬停:active鼠标按下顺带一提,可交互式的组 ...
:link,:visited,:focus,:hover,:active详解
CSS 又名层叠样式表,所谓层叠,就是后面的样式会覆盖前面的样式,所以在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置. 而focus, ho ...
CSS中a标签样式原则 a:link a:visited a:hover a:active执行顺序
CSS为一些特殊效果准备了特定的工具,我们称之为"伪类".其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: 代码如下: :link : ...
CSS visited，hover，active , focus这四个区别
CSS伪类用于向某些选择器添加特殊的效果,在样式表中,各样式排列的顺序很有讲究. :link 与 :visited 在样式文件中的顺序可以随便放置. :focus,: hover,:active这几个 ...

hover、focus、active、link、visited状态 CSS

hover、focus、active、link、visited状态 CSS

hover、focus、active、link、visited状态 CSS相关推荐

最新文章

热门文章