前端基础HTML---伪类选择器

<!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
                    
             */
            
            /* 
                没访问过得颜色
             */
            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>

 

前端基础HTML---伪类选择器

上一篇:HTML练习


下一篇:JEESZ-Zookeeper集群安装