美文网首页
css的伪类选择器

css的伪类选择器

作者: 念_ae7b | 来源:发表于2018-11-01 17:24 被阅读0次

在写一些前端网页时,不想用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;
    }

相关文章

  • 伪类和伪元素

    伪类:CSS 伪类用于向某些选择器添加特殊的效果。 伪元素:CSS 伪元素用于向某些选择器设置特殊效果。 1、伪类...

  • CSS3选择器

    1CSS选择器的分类 基本选择器 层次选择器 伪类选择器 动态伪类选择器 目标伪类选择器 语言伪类选择器 UI元素...

  • CSS伪类选择器总结

    CSS伪类选择器总结 动态伪类选择器:link, 链接伪类选择器,超链接未被访问前:visited, 链接伪类选择...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS3选择器--结构性伪类选择器

    在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素: 1、伪类选择器:CSS中已经定义好的选...

  • CSS进阶知识点--CSS3伪类选择器和伪元素

    伪类选择器 动态伪类(锚点伪类、用户行为伪类) UI元素状态伪类 CSS3结构伪类 否定选择器 伪元素 动态伪类 ...

  • 伪元素和伪类

    一、伪类 1.1 定义 css伪类:css伪类用于向某些选择器添加特殊效果。 伪类其实与普通的css类相类似,可以...

  • css伪元素

    css 伪元素 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯...

  • CSS选择器

    简单概括一下CSS的选择器 基本选择器 属性选择器 伪类选择器 动态伪类 常用的四个锚点伪类 UI元素状态伪类 :...

  • CSS自带的伪类选择器

    我们使用CSS自带的伪类选择器,从而可以更加方便的完成页面点击事件 css伪类选择器:分为静态和静态 静态伪类 只...

网友评论

      本文标题:css的伪类选择器

      本文链接:https://www.haomeiwen.com/subject/imwxxqtx.html