CSS 的四种伪类详解

css伪类(Pseudo-classes)

css伪类是用来添加一些选择器的特殊效果。

语法

伪类的语法:

selector:pseudo-class {property:value;}

CSS类也可以使用伪类:

selector.class:pseudo-class {property:value;}

常见的五种 css 伪类

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

:focus 向拥有键盘输入焦点的元素添加样式。

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

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

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

注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

css对于样式会采取“就近原则”,所以写在后边的样式就覆盖了前边的样式。

注意:伪类的名称不区分大小写。


代码示例:

css伪类

这是一个什么都不添加的标签

注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

    注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。



效果视图:

   1.标签不添加herf属性的话。默认显示字体颜色为黑色,没有下划线,这是和有herf属性的区别。

2.鼠标移到元素上方触发伪类hover,字体颜色显示为黄色。


CSS 的四种伪类详解_第2张图片

3.点击元素触发伪类visited,字体颜色显示为蓝色。


4.刚加载出来表示未访问的连接,字体显示为红色。



                                                                                                                                               (完)

你可能感兴趣的:(CSS 的四种伪类详解)