伪类link,hover,active,visited,focus的区别

例一: /*css*/a:link{ color: blue;}a:visited{ color: green;}a:hover{ color: red;}a:focus{ color:black;}a:active{ color: yellow;} /*html*/<p><a href="#">click me</a></p> 例二: /*css*/input:focus{ background: yellow;}input:a…

a标签伪类link，hover，active，visited，focus区别

<div id="content"> <h3><a class="a1" href="#">a标签伪类link,hover,active,visited,focus区别</a></h3> </div> a.a1:link{ /*链接未被访问时的状态*/ color: blue; } a.a1:visited{ /*链接访问后的状态*/ color: green; } a.a1…

【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了. XML/HTML代码 <!–[if IE 6]> <script type=”text/javascript”> docume…

【转】链接伪类（:hover）CSS背景图片有闪动BUG

来源:http://www.css88.com/archives/744 ------------------------------------------------------------------------------------------------- IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面…

超链接标签的CSS伪类link,visited,hover,active

CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有:link,:visited,:hover,:active,而且需要按照这个顺序设置,有个简单的记法是,取首字母组成 love hate,记住“爱恨”就行了. 1, 查看超链接a标签的默认样式新建一个网页a.html,复制下面的内容: <html> <head> </head&…

如何做一个导航栏————浮动跟伪类（hover）事件的应用

我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focus 现在我们要用的是hover事件,也就是鼠标指上发生的事情. 例:a:hover{ color:red } 还有要用到的是浮动属性, 例: <div> float:left; </div> <!--使此div块向左浮动--&g…

伪样式：hover ,:active,:focus

<!doctype html>无标题文档 #name:focus { background: #0F6 } #password:hover { background: #F00 } #password:active { background: #FF3 } 姓名: 密码:…

HTML页面中5种超酷的伪类选择器:hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点. 给平淡的站点带来活力 hover效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果.所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微差强人意,所以请使用FireFox,…

利用css伪类选择器hover控制两个元素属性

示例1: <html> <body> <style> #a:hover {color : #FFFF00;} #a:hover > #b:first-child{color : #FF0000;} #a:hover > #b{color : #FF00FF;} #a:hover + #c{color : #00FF00;} #a:hover + #c > #b{color : #0000FF;} </style> <div id='a…

你知道hover、active这四个伪类为什么要按顺序写吗

刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗引言 :link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的记忆方法),不然有些效果会出问题. 但是你们都想过这几个属性为什么要按顺序排吗? :link和:hover 当鼠标移动到a标签上时,会触发a标签上的:hover效果,但同时,此时的:link效果仍然存在于a标签上,既然两个效果都在a标签上起作用,那么根据css的就近原则,写在后面的css样式就覆盖了…

CSS-弹性布局-伪类选择器-复杂选择器

1.定位 1.堆叠顺序一旦将元素变为已定位元素的话,元素们则有可能出现堆叠的效果. 如何改变堆叠顺序? 属性:z-index 取值:无单位的数字,数字越大越靠上. 注意: 1.父子元素间,z-index无效,永远都是子元素压在父元素上. 2.只有已定位元素才能使用z-index属性. 2.固定定位 1.什么是固定定位将元素固定在页面中的某个位置,位置不会随着滚动条而发生改变,始终固定在可视化区域. 2.语法 position:fixed; 配合偏移属性使用 3.特点 1.固定定位的元素会变成…

css伪类的展现

常见的伪类选择器 :link :hover :active :visited 如果为以上几个伪类赋予相同css属性名,不同的css属性值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css测试</title> <style type="text/css"> a:link…

CSS的伪元素和伪类

css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容(可以是文字,图标等,下图就是一个正方形图标,图标是通过css绘制的). 这些添加不会出现在DOM中,不会改变文档内容,不可复…

CSS :focus 伪类

:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字时.接受键盘事件时客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:hover.active.focus 上述三种伪类不是互斥的,一个元素同时可以适用其中的若干个 :focus伪类,适用于已获取焦点的元素的样式.当一个元素获取焦点时,证明它是可控制的,例如一…

【CSS-进阶之元素：focus伪类模拟点击事件】

先放上我们最终实现的效果注:这里建议插入codepen(临时使用图片代替) 我们想要实现当点击某个元素时,显示一个tip浮动框. html: <div class="wrapper"> <span class="click-ele">我是按钮</span> <div class="popup">我是文字测试君</div> </div> 通常我们会采用JS的方法给触发事件元素…

深入理解CSS伪类

× 目录 [1]锚点 [2]UI元素 [3]结构伪类[4]其他前面的话伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到.实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示.本文将详细介绍伪类的详细知识锚点关于锚点<a>,有常见的5个伪类,分别是:link,:hover,:active,:focus,:visited a:link{background-color:pink;}/*…

CSS 伪类

Link The :link CSS pseudo-class lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In orde…

CSS 伪类和伪对象选(五)

一.伪选择器伪选择器包括:伪类选择器和伪对象选择器,以冒号(:)作为前缀,冒号后紧跟伪类或者伪对象名称,冒号前后没有空格,否则解析为包含选择器如: div:hover{ font-size:12px;} /* div为指定标签名 hover选择符,伪类或者伪元素名 */ 伪选择器专门用来选择特殊区域或者特殊状态下的元素或者对象,这些特殊区域或者特殊状态是无法通过标签选择器,ID选择器或者类选择器进行精确控制的二.伪类选择器和伪对象选择器伪类说明 :focus 定义对象在成为输入焦点…

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择…

CSS3选择器（三）之伪类选择器

伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择器的使用方法. CSS的伪类语法和别的语法有点不一样,其主要有两种语法表达方式. 第一种写法 E:pseudo-class {property:value}/*其中E为元素;pseudo-class为伪类名称;property是css的属性;v…

深入学习css伪类和伪元素及其用法

前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义伪类用于在页面中的元素处于某个状态时,为其添加指定的样式. 伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中,我们可以为其添加样式. [重点]最常规的区分伪类和伪元素的方法是:实现伪类的效果可以通过添加类来实现,但是想要实现伪元素的等价效果只能创建实际的DOM节点. 注意伪类使用单冒号 ":&q…

CSS魔法堂：稍稍深入伪类选择器

前言过去零零星星地了解和使用:link.::after和content等伪类.伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理. 伪类伪类选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果.具体有:link.:visited.:hover.:active.:focus.:focus-within.:target.:root和:checked. HTMLAnchorElement的4大经典伪类 :link,用于设置链接初始状态时的样式…

谈谈css伪类与伪元素

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. 在这里也许有不少人都见过:before,::before这样的写法,估计有些人很纳闷,这两者有什么区别吗? 有疑问,那我们就先把疑问解决了先,不要把疑问留着.其实:before,::before这两种写法都是等效,只是:befor是CSS2的写法,::before是CSS3的写法.双冒号(::)这是CSS3…

css中伪类与伪元素的区别

一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪类. 2:伪类选择器有哪些:1):link向未被访问的链接添加样式(链接,看来是只用于<a>)2):visited向已被访问过的链接添加样式(链接,看来还是只用于<a>)3):hover当鼠标悬浮在元素上方时,向元素添加样式(没有特意指定必须是链接,所以这个标签被大量用于定义任何一个块…

css3中的伪类选择器

一.动态伪类动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",":visited";另外一种被称作用户行为伪类,如“:hover”,":active"和":focus".先来看最常见的锚点伪类著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.原文: https://www.w3cplus.com/c…

CSS设计指南之伪类

伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在某种结构上的关系时(比如某个元素是一组元素中的第一个或最后一个),为相应元素应用CSS样式. 一.UI伪类 1.链接伪类 Link:此时,链接就在那儿等着用户点击. Visited:用户此前点击过这个链接. Hover:鼠标指针正悬停在链接上. Active:链接正在被点击(鼠标在元素上按下,还没有…

CSS选择符、伪类、层叠

主题,架子(时间架子,空间架子,三角架),素材. CSS 三种方式行内样式嵌入样式链接样式上下文选择符祖父孙 p em {color:red;} 父子 p > em {color:red;} 紧邻同胞 h2 + p {color:red;} 一般同胞 h2 ~ a {color:red;} 通用 * {color:red;} ID 类选择符 .class1 {color:red;} #id1 {color:red;} 属性选择符选择带有属性名的标签 img[title] {co…

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

后代选择器祖先元素后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器元素~兄弟元素(该元素之后的所有兄弟元素) <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8">…

实用CSS3属性之 :target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支持: 不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox.Chrome.等这些浏览器都支持. 用法: :target伪类与:hover.:link.:visited.:focus等伪类的用法一样 :target {color:blue} 实例:CSS3 :tar…

CSS3 :target伪类的理解与使用

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支持: 不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox.Chrome.等这些浏览器都支持. 用法: :target伪类与:hover.:link.:visited.:focus等伪类的用法一样 :target {color:blue} 实例:CSS3 :…

【伪类link,hover,active,visited,focus的区别】的更多相关文章