CSS链接使用伪类的顺序

顺序为:link-visited-hover-active a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */…

在一次开发项目中,我用a链接来做效果,测试的时候发现,a:hover被点击后的效果就不再了!我百度才知道,原来在css写a链接也是有顺序之分的. 顺序应该是: a:link a标签还未被访问的状态: a:visited a标签已被访问过的状态: a:hover 鼠标悬停在a标签上的状态: a:active a标签被鼠标按着时的状态: 本质就是“同等优先权的样式,写在后边的会覆盖前边”,a标签的伪类只不过是又结合了不用的动作顺序,动作的触发顺序决定了伪类的顺序. 因为前2者两种状态是常态,而后2者…

CSS属性、伪类选择器，CSS3选择器

CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!IE6在天朝何时能寿终就寝! 以上跟本文章无关,今天我们来CSS的选择器,虽然IE6不支持,但是jqurey实现了CSS的很多选择器的,所以就当温习jqurey的选择器. 因为伟大的IE6不支持CSS2的有些高级属性,所以CSS选择器一直没有发挥.要记住一点:对于站点功能很重要的元素还是不要用一些“高…

CSS Pseudo-classes（伪类）

CSS Pseudo-classes(伪类) CSS伪类是用来添加一些选择器的特殊效果. 一.语法伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} 二.anchor伪类在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {co…

CSS链接四种状态注意顺序、UI伪类选择器的顺序

css定义超链接是要有先后顺序的.否则,可能会出现某个或某几个样式不起作用的bug.例如:visited与hover顺序颠倒了,则不能显示hover和active的样式了. 正确的顺序: a:link 未访问过的样式a:visited 访问过的样式 a:hover 鼠标处于鼠标悬停状态的样式 a:active 当鼠标左键按下时,被激活的样式. 还有UI伪类选择器中的顺序: :hover :foucs :active…

CSS选择器：伪类（图文详解）

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什么类?不明确.因为需要看用户点击前是什么状态,点击后是什么状态.所以,就叫做"伪类". 静态伪类和动态伪类伪类选择器分为两种. (1)静态伪类:只能用于超链接的…

CSS中的伪类与伪元素

在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某些选择器添加特殊的效果.应用于一组 HTML 元素. 伪类的作用获取页面中不存在的信息,即通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息.一个元素可以同时设置多个伪类效果.伪类名称对大小写不敏感. 伪类有以下几种,截图引自W3School: 注: a:link /…

CSS选择器之伪类选择器（交互）

:link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. :empty [CSS3]选择的元素里面没有任何内容(IE6-8不支持) :not [CSS3]排除特定的元素(IE6-8不支持) :focus 当用户点击或触摸元素或通过键盘的“tab”键选择它时会被触发.(IE7及以下不支持) :focus-within 表示一个元素获得焦点,或,该元素的后代元素…

css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点特点 1.默认是 inline 元素 2.必须包含 content 属性 3.content 属性的值 : 字符串或者CSS的函数(url(), attr(), counter()) 多个字符串使用空格连接注意事项: 规范要求是用::, 实际开发使用: 为了支持IE低版本浏览器. 使用场景: 1.清除浮动 e:after{ content: ""…

css：focus伪类的使用

css中:focus伪类的使用,即给已获取焦点的元素设置样式示例一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>:focus</title> <style> *{ margin: 0; padding: 0; } input:focus{ background: #cbcbcb; } &…