css的伪类选择器

在写一些前端网页时,不想用jQuery,js等就想实现一些鼠标事件触发不同的样式。因此我们可以使用CSS自带的伪类选择器来帮我们达到目的

css伪类选择器:

静态伪类 只能用于超链接的样式

  • :link 用于未被访问的链接
  • :visited 用于已访问的链接

动态伪类 针对所有标签都适用的样式

  • :hover 用于当用户把鼠标移动到元素上面时的效果;
  • :active 用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)
  • :focus 用于元素成为焦点,经常用在表单上
注意在使用伪类选择器时,要让他们遵循一个爱恨原则:LoVe,HAte,也就是Link--visited--hover--active不然会有意想不到的错误。

对应代码:

       /*让超链接点击之前是红色*/
        a:link{
            color:red;
        }

        /*让超链接点击之后是绿色*/
        a:visited{
            color:orange;
        }
        /*鼠标悬停,放到标签上的时候*/
        a:hover{
            color:green;
        }
        /*鼠标点击链接,但是不松手的时候*/
        a:active{
            color:black;

文本框例子:

  /*
    伪类选择器:动态伪类
  */

   /*
    让文本框获取焦点时:
    边框:#FF6F3D这种橙色
    文字:绿色
    背景色:#6a6a6a这种灰色
   */
    input:focus{
        border:3px solid #FF6F3D;
        color:white;
        background-color:#6a6a6a;
    }

    /*
    鼠标放在标签上时显示蓝色
    */
    label:hover{
        color:blue;
    }

    /*
    点击标签鼠标没有松开时显示红色
    */
    label:active{
        color:red;
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类...
    放不下FBX阅读 5,169评论 0 3
  • 最近写一些前端网页时,不想用jQuery,js等就想实现一些鼠标事件触发不同的样式。因此我们可以使用CSS自带的伪...
    默写_0c03阅读 480评论 0 2
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,451评论 1 62
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,882评论 0 5
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,895评论 1 45