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>

结果：

巴特西

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

最新文章

热门文章