阅读 95

前端基础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>

 

原文:https://www.cnblogs.com/leiyanting/p/14949387.html

文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐