九,伪类样式

作者: 好多可乐 | 来源:发表于2020-12-17 15:06 被阅读0次

    伪类样式处理:
    定义: 通常情况,超级链接上设置的样式,称为伪类
    作用: 设置超级链接的四种状态(1-4,需要按照顺序来,否则就没有效果):
    小贴士:
    1,伪类是用在超级链接上效果比较多,但超级链接不是伪类
    2,伪类是选择器(冒号前面的是标签,比如a标签。冒号后面的值才是伪类,比如link)
    属性:
    1,a:link:未访问的链接
    2,a:visited:已访问的链接
    3,a:hover:鼠标移动到链接上(浮动,悬停)具有悬停效果的组件都可以使用这个属性,比如label,input等
    4,a:active:向被激活的元素添加样式(鼠标指针按下了,但是没有松开的瞬间)
    5,:focus:选择拥有键盘焦点的元素(比如文本框,标签可以放进去,就是有焦点)

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="test5.css">
    </head>
    
    <body>
        <p>http://www.imooc.com</p>
        <p class="p1">慕课网</p>
        <a href="#">伪类</a>
        <input type="text" name="1">
        <label>测试</label>
    </body>
    
    </html>
    
    ```css
    a:link{
          color: green;
        }
        a:visited{
          color: red;
        }
        a:hover{
          color: blue;
        }
        a:active{
          color: yellow;
        }
        input:hover{
            background-color: yellow;
        }
        input:active{
            background-color: blue;
        }
        label:active{
            color: blue;
        }
    
    

    相关文章

      网友评论

        本文标题:九,伪类样式

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