伪类选择器

2021-06-08 09:36:12 阅读：152 来源： 互联网

标签：hover 伪类 color 选择器 background active 链接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*
             * 伪类专门用来表示元素的一种的特殊的状态，
             *     比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
             * 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
             */
            
            /*
             * 为没访问过的链接设置一个颜色为绿色
             *     :link
             *         - 表示普通的链接（没访问过的链接）
             */
            a:link{
                color: yellowgreen;
            }
            
            /*
             * 为访问过的链接设置一个颜色为红色
             *     :visited
             *         - 表示访问过的链接
             * 
             * 浏览器是通过历史记录来判断一个链接是否访问过,
             *     由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
             * 
             */
            a:visited{
                color: red;
            }
            
            /*
             * :hover伪类表示鼠标移入的状态
             */
            a:hover{
                color: skyblue;
            }
            
            /*
             * :active表示的是超链接被点击的状态
             */
            a:active{
                color: black;
            }
            
            /*
             * :hover和:active也可以为其他元素设置
             * IE6中，不支持对超链接以外的元素设置:hover和:active
             */
            /*p:hover{
                background-color: yellow;
            }
            
            p:active{
                background-color: orange;
            }*/
            
            /*
             * 文本框获取焦点以后，修改背景颜色为黄色
             */
            input:focus{
                background-color: yellow;
            }
            
            /**
             * 为p标签中选中的内容使用样式
             *     可以使用::selection为类
             *     注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection
             */
            
            /**
             * 兼容火狐的
             */
            p::-moz-selection{
                background-color: orange;
            }
            
            /**
             * 兼容大部分浏览器的
             */
            p::selection{
                background-color: orange;
            }
            
        </style>
    </head>
    <body>
        
        
        <a href="http://www.baidu.com">访问过的链接</a>
        <br /><br />
        <a href="http://www.baidu123456.com">没访问过的链接</a>
        
        <p>我是一个段落</p>
        
        <!-- 使用input可以创建一个文本输入框 -->
        <input type="text" />
        
    </body>
</html>

标签：hover,伪类,color,选择器,background,active,链接
来源： https://www.cnblogs.com/juham/p/14861400.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

伪类选择器