<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类选择器</title>
        <style type="text/css">
            /* 
                伪类专门用来表示元素的一种特殊的状态
                    比如: 访问过的超链接,比如普通的超链接,比如获取焦点的文本框
                    当我们需要为处在这些特殊状态的元素设置样式时,我们可以使用伪类
                    
                    正常链接
                    - a:link
                    访问过的链接
                    - a:visited (只能定义字体颜色)
                    鼠标滑过的链接
                    -
                    a:hover
                    正在点击的链接
                    - a.active
                    
                    :hover和:active也能为其他元素设置
                    IE6中不支持对超链接以外的元素设置:hover和:active
                    
                    获取焦点
                    - :focus
                    指定元素前
                    - :before
                    指定元素后
                    - :after
                    选中的元素
                    - :selection
                    
             */


             /* 
                :before表示元素最前面的部分
                一般before都需要结合content这个样式一起使用
                通过content可以想before或after的未知添加一些内容
                
                :after表示元素的最后面的部分
             */
            
            /* 
                没访问过得颜色
             */
            a:link{
                color: #7FFF00;
            }
            
            /* 
                访问过的颜色
                    由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色
             */
            a:visited{
                color: red;
            }
            
            /* 
                鼠标移过链接的颜色
             */
            a:hover{
                color: #FF8C00;
                
            }
            
            /* 
                鼠标点击链接时的颜色
             */
            a:active{
                color: #8A2BE2;
            }
            
            /* 
                获取焦点状态
                IE6不支持
             */
            input:focus{
                background-color: yellow;
            }
            
            /* 
                为p标签中选中的内容使用样式
                selection选中内容
                注意: 这个伪类在火狐中需要采用另一种方式编写 ::-moz-selection
             */
            /* 
                兼容大部分浏览器
             */
            p::selection{
                background-color: yellow;
            }
            /* 
                兼容火狐
             */
            p::-moz-selection{
                background-color: #FF8C00;
            }
            
        </style>
    </head>
    <body>
        <a href="https://v3.bootcss.com/">访问过的链接</a>
        <a href="https://www.bootcdn.cn/">没访问过的链接</a>
        <input type="text"/>
        <p>selection选中内容</p>
    </body>
</html>
posted on 2021-06-29 11:58 leiyanting 阅读(484) 评论(0) 收藏举报
刷新页面返回顶部
导航
