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对于样式会采取“就近原则”,所以写在后边的样式就覆盖了前边的样式。

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


代码示例:

<html>

<head>

<meta charset="UTF-8">

<title>css伪类</title>

<style>

Title

Title

Title

a:link{

color:red;

    }

a:hover{

color:yellow;

    }

a:visited{

color:blue;

    }

a:active{

color:green;

    }

</style>

</head>

<body>

<a>这是一个什么都不添加的标签</a><br><br>

<a herf=“#”>注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

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

</body>



效果视图:

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

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


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


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



                                                                                                                                               (完)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,576评论 1 62
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,285评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,208评论 0 1
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,968评论 0 5
  • 伪类是一种虚构的状态或者是一个具有特殊属性的元素可以使用css进行样式修饰。常见的几种伪类有: 伪类前面总是加一个...
    fenerchen阅读 4,956评论 0 2

友情链接更多精彩内容