伪类选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /*
        伪类专门用来表示元素的一种特殊的状态
        比如：访问过的超链接，普通的超链接，，获取焦点的文本框
        当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
        1.正常链接
        表示普通的链接，没访问过的链接
        a:link
        2.访问过的链接
        a:visited(只能定义字体颜色)
        表示访问过的链接
        3.鼠标滑过的链接
        a:hover
        4.正在点击的链接
        a:active
        
        浏览器通过历史记录来判断一个链接是否访问过
        由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
        
        */
        
        a:link {
            color:brown;
            font-size: 50px;
        }    
        a:visited{
            color: aquamarine;
        }
        a:hover{
            color: blueviolet;
        }
        a:active{
            color: black;
        }
        p:hover{
            color: chartreuse;
        }
        /*
        1.获取焦点：
        :focus
        2.制定元素前
        :before
        3.制定元素后
        :after
        4.选中的元素
        ::selection
        
        文本框获取焦点以后修改背景颜色为黄色
        */
        input:focus{
            background-color: yellow;
            }
        /*
        为p标签中选中的内容使用样式
        可以使用::selection为类
        */
       ::selection{
           background-color: orange;
       }
        </style>
    </head>
    <a href="www.baid.com.cn">123</a>
    <a href="www.baiu.com.cn">123</a>
    <p>我是一个p标签</p>
    <input type="text" />
    <body>
    </body>
</html>

 

posted @ 2019-07-09 20:47  zuiaimiusi  阅读(170)  评论(0)    收藏  举报