CSS中的伪类是什么,有什么用

html-css08

CSS中的伪类是什么,有什么用,第1张

CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value},简单地用一个半角英文冒号(:)来隔开选择符和伪类。

CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的CSS伪类。

◆link用在为访问的连接上。

◆visited用在已经访问过的连接上。

◆hover用于鼠标光标置于其上的连接。

◆active用于获得焦点(比如,被点击)的连接上。

a:link{color:red }  

a:visited{color:green}  

a:hover{color:blue}  

a:active{color:orange}

参考于

zhangbaoenji

的答案

:hover选择器用于选择鼠标指针浮动在上面的元素。当鼠标悬停在元素上时,可使用此选择器设置元素的样式;它可用于每个元素。

语法:

与hover相关的伪类:

● :hover 选择器可用于所有元素,不仅是链接。

● :link 选择器设置了未访问过的页面链接样式,

● :visited 选择器设置访问过的页面链接的样式

● :active选择器设置当你点击链接时的样式

说明: 为了产生预期的效果,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

示例1: 在悬停在元素上时更改背景颜色。

效果图:

示例2:在文本上悬停时显示隐藏的块

效果图:

更多HTML的相关知识,可访问: web前端自学 !!

CSS伪类用于向特殊状态的选择器添加特殊效果,使用最多的伪类是锚伪类。

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标移动到链接上,此伪类不止限于超链接上,其他元素也可使用

a:active 选定的链接

注意:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的;a:active 必须被置于 a:hover 之后,才是有效的;伪类名称对大小写不敏感。

伪类的使用是在选择器后添加伪类,如selector:pseudo-class{color:red}, selector.class:pseudo-class{color:red}

注:pseudo-class表示伪类,但并无此伪类,selector表示选择器。

CSS的伪类还有其他几种:

:active 向被激活的元素添加样式。

:focus 向拥有键盘输入焦点的元素添加样式。IE中必须声明 <!DOCTYPE>,IE8以下不支持。

:hover 当鼠标悬浮在元素上方时,向元素添加样式。

:link 向未被访问的链接添加样式。

:visited 向已被访问的链接添加样式。

:first-child 向元素的第一个子元素添加样式。IE中必须声明 <!DOCTYPE>。

:lang 向带有指定 lang 属性的元素添加样式。IE中必须声明 <!DOCTYPE>,IE8以下不支持。

CSS中,还有伪元素,形态及使用方法类同伪类。

:first-letter 向文本的第一个字母添加特殊样式。

:first-line 向文本的首行添加特殊样式。

:before 在元素之前添加内容。

:after 在元素之后添加内容。