HTML&CSS基础-伪类选择器

　　　　　　　　　　HTML&CSS基础-伪类选择器

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

一.html源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        
        <style>
            /**
             * 伪类
             *     功能:
             *         有时候，你需要选择本身没标签但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。 CSS为他们提供一些选择。即伪类是专门用来表示元素的一种特殊状态
             * 
             *     伪类给链接定义样式 给链接定义样式有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成 4种不同的状态。
             *        正常链接
             *            a:link     
             *        访问过的链接
             *            a:visited(由于涉及到用户的隐私问题，所有使用visited伪类只能设置字体的颜色，只能定义字体颜色)
             *        鼠标滑过的链接
             *            a:hover
             *        正在点击的链接
             *            a:active
             *    浏览器是通过历史记录来判断一个链接是否被访问过。
             * 
             * 
             * 案例如下:
             *         为未访问过的连接设置黄绿色
             *         为访问过的连接设置一个颜色为红色
             *         为鼠标移入的状态设置为深紫色
             *         为超链接被点击的状态设置为深粉红色
             */
    /*        a:link{
                color: yellowgreen;
            }
            a:visited{
                color: red;
            }
            a:hover{
                color: brown;
            }
            a:active{
                color: deeppink;
            }*/
            
            /**
             *     ":hover"和":active"也支持其它标签哟，IE6中，不支持对超链接以外的元素设置，":hover"和":active"
             */
            p:hover{
                background-color: yellow;
            }
            p:active{
                background-color:darkorchid;
            }
            
            /**
             *     设置文本框背景颜色为黄色
             * 
             */
            input:focus{
                background-color: yellow;
            }
            
            
            /**
             *     为p标签中选中的内容使用样式,可以使用"::selection伪类"
             *     这种写法只兼容火狐浏览器
             */
            p::-moz-selection{
                background-color: orange;
            }
            /**
             * 这种写法兼容大部分浏览器
             */
            p::selection{
                     background-color: orange;
               }

        </style>
    </head>
    <body>
        
        <a class="abc" href="https://www.cnblogs.com/yinzhengjie/">访问过的连接</a><br /><br />
        
        <a class="def" href="https:www.baidu.com">没有访问过的连接</a><br />
        
        <p>我是一个p标签</p>
        
        <!--
            使用input标签可以创建一个文本输入框
        -->    
        <input type="text" />
    </body>
</html>

 

二.浏览器打开以上代码渲染结果

 

 

posted @ 2017-01-04 17:06  尹正杰  阅读(1566)  评论(0)  编辑  收藏  举报