css2.伪类选择器

最新推荐文章于 2022-11-02 23:34:40 发布

时光无错孤独难谈

最新推荐文章于 2022-11-02 23:34:40 发布

阅读量111

点赞数

分类专栏： html5 && css

本文链接：https://blog.csdn.net/qq_43745403/article/details/104291851

版权

html5 && css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>伪类选择器</title>

        <style type="text/css">
            /* 
                伪类:专门用来标识元素一种特殊状态
                    eg:访问过的超链接，焦点文本框
                当我们需要为处在这些特殊状态的元素设置样式时，使用伪类
             */
            /* 
                为一个没访问过的链接设置颜色
                    :link
                        -表示未访问过的链接
             */
            a:link{
                color: aqua;
            }
        
            /* 
                访问过的链接设置颜色
                    :visited
                        -表示访问过的链接

                浏览器通过历史记录判断有没有被访问过
                    visited只能设置字体颜色
             */
             a:visited{
                 color: cornflowerblue;
             }
        
             /* 任何元素适用
                    :hover 伪类鼠标移动状态
              */
             a:hover{
                 background-color: crimson;
             }
        
             /* 
                :active 超链接被点击状态
              */
             a:active{
                 color: darkkhaki;
             }
             


             /* 
                :focus  文本框获取焦点
              */
            input:focus{
                background-color: darkmagenta;
            }


            /*                            兼容火狐      p::-moz-selection
                ::selection 伪类为p标签中选中内容样式
             */
             p::selection{
                 background-color: darkorange;
             }

        </style>

    </head>


    <body>

        <a href="http://www.hao123.com">访问网页1</a> 
        <br/>
        <a href="http://www.hao123123.com">访问网页2</a>



        <!-- 用input创建一个文本输入框 -->
        <input type="text"/>


        <p>段落段落段落段落段落段落</p>

    </body>



    <!-- 
        涉及到a的伪类四个：
            :link
            :visited
            :hover
            :active
        四个选择器的优先级是一样的
     -->
</html>

时光无错孤独难谈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css2.伪类选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title>伪类选择器</title> <style type="text/css"> /* ...
复制链接

扫一扫