伪类这个叫法源自他们与类相似,但实际上并没有类会附加到标记中。
伪类分为两种
UI(User Interface,用户界面)伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式
UI伪类会基于特定HTML元素的状态应用样式。最常使用UI伪类的元素是链接(a元素),利用UI伪类,链接可以在用户鼠标悬停时改变文本颜色,或者去掉文本的下划线。此外,还可以有其他响应方式,比如悬停时显示一个信息面板,相关内容在我们讨论交互组件的时候再聊。
1. 链接伪类
针对链接的伪类一共有4个,因为链接始终会处于如下4种状态之一。
Link。此时,链接就在那儿等着用户点击。
Visited。用户此前点击过这个链接。
Hover。鼠标指针正悬停在链接上。
Active。链接正在被点击(鼠标在元素上按下,还没有释放)。
以下就是这些状态对应的4个伪类选择符(使用了a选择符和一些示例声明):
a:link{color: black;} a:visited{color: gray;} a:hover{color: yellow;} a:active{ color: red;}
如果不按照这里列出的顺序使用他们,浏览器可能不会显示出预期的结果,建议使用“LoVe?HA!” (爱 ( love)和恨 (hate)),大写字母就是每个伪类的第一个字母。链接的默认状态是黑色,带下划线。鼠标移到上面时(悬停状态),链接的下划线消失,颜色仍然是黑色。当用户在链接上按下鼠标时(活动状态),链接变成红色。而在链接被点击后,也就是鼠标在链接上按下,又在链接上释放后,会触发浏览器打开URL,此后(或者更准确地说,到浏览器访问历史中的这个URL过期或被用户删除之前),链接会一直显示为灰色
有些伪类可以用于任何元素,而不仅是a元素。比如,下面这条规则可以让段落背景在鼠标悬停是变成灰色:
p:hover{background-color:grey;}
2. :focus伪类
e:focus e表示任何元素,如p、h1、section、等等
表单中文本字段在用户单击时会获得焦点,然后用户才能在其中输入字符,下面的规则
input:focus {border:1px solid blue;}
3. :target伪类
e:target如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target伪类选中它。
对于下面这个链接
<a href="#more_info">more infomation</a>
位于后面的元素
<h2 id="more_info">This is infomation</h2>
那么如下CSS规则
#more_info:target{background-color: #eee;}
会在用户单击链接转向ID为more_info的元素时,为该元素添加浅灰色背景
相关推荐
CSS伪类集合集合了CSS2中所有的伪类
css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...
css伪类 超链接 连接的用法 描述 link的样式说明
CSS中的伪类,其中讲的很清楚,不懂的同学可以参考
以前我还是比较忽视这两个家伙的,今天第一次见到原来伪类的好处这么多,以后会多多推荐CSS3伪类实现的效果 使用方法: 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = ...
CSS日常总结--CSS伪类
CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} anchor伪类 在支持 CSS 的浏览器中...
使用方法: 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = “admin5”即可
CSS3选择器--链接伪类 链接伪类 01 链接伪类 定义超链接时,为了提高用户体验,经常需要为超链接指定不同的状态,使得超链接在点击前、点击后和鼠标悬停时的样式不同。 a:link a:visited a:hover a:active 链接伪类 ...
纯css:hover伪类多级下拉菜单代码演示地址:http://www.777moban.com/Preview/28_198/
伪类选择器:CSS中已经定义好的选择器,不能随便取名 :link 伪类将应用于未被访问过的链接,与:visited互斥。 :hover 伪类将应用于有鼠标指针悬停于其上的元素。 :active 伪类将应用于被激活的元素,如被点击的链接、...
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
纯csshover伪类多级下拉菜单代码
css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性。 (2) :visited:设置a对象在其链接...伪类名字对大小写不敏感,但在定义顺序上有要求。:hover必须被置于:link和:visited之后才
SS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。
css-div的border属性使用&伪元素伪类
css-click css 伪类 :click
CSS3选择器--结构化伪类选择器;结构化伪类选择器;结构化伪类选择器;:root选择器;:not选择器;:only-child 选择器;:first-child和:last-child选择器;:nth-child(n)和:nth-last-child(n)选择器;:nth-of-type(n)和:nth-...
莫要慌,实现方法有很大,今天懒人哥哥就教你一招如何用CSS3的伪类实现这个效果 关键在于CSS的伪类after中的content,它可以直接指定当前样式标签里的内容 废话不多说,仔细看代码你就懂啦(什么?你一点CSS基础...