Html学习之十（CSS选择器的使用--伪类选择器）

伪类选择器

一、基于a标签。

1、:hover　　选择鼠标滑过的超链接元素

2、:active　　选择鼠标单击中的超链接元素

3、:link　　选择未被访问的超链接元素

4、:visited　　选择已经被访问过的超链接元素

二、基于input标签。

1、:focus　　表示某个input元素被选中的情况。

2、:enable　　启用input元素

3、:disable　　禁用input元素

三、:before和:after伪类选择器

1.:before　　在一个元素之前添加一个元素

2.:after　　在一个元素之后添加一个元素

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>链接伪类</title>
        <style type="text/css">
            a:link,a:visited{                  /*未访问和访问后*/
                color:pink;
                text-decoration:none;         /*清除超链接默认的下划线*/
            }
            a:hover{                             /*鼠标悬停*/
                color:blue;
                text-decoration:underline;  /*鼠标悬停时出现下划线*/
            }
            a:active{ color:#F00;}            /*鼠标点击不动*/
        </style>
    </head>
    <body>
        <a href="#">公司首页</a>
        <a href="#">公司简介</a>
        <a href="#">产品介绍</a>
        <a href="#">联系我们</a>    
    </body>
</html>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>before选择器的使用</title>
        <style type="text/css">
            p:before{
                 content:"传智播客";
                 color:#c06;
                 font-size: 20px;
                 font-family: "微软雅黑";
                 font-weight: bold;
            }
        </style>
    </head>
    <body>
        <p>专注于Java、.Net、PHP、网页设计和平面设计、IOS、C++工程师的培养，提供的免费视频教程是目前
        覆盖面最广，项目最真实的视频教程之一。</p>
    </body>
</html>

结果：

 

posted @ 2019-03-30 23:16  泰初  阅读(1158)  评论(0)  编辑  收藏  举报