当前位置:首页 » php学习笔记 » css--伪类选择器

css--伪类选择器

原创 stpevenchow 62°c 2019年09月30日 23:31 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

<html>
    <head>
        <meta charset="utf-8">
        <title>伪类选择器</title>
        <style type="text/css">
            /* :hover当鼠标划过时,则显示css的样式
                :link未被访问的超链接
                :visited被访问过得超链接
                :active被鼠标点击瞬间--就是鼠标左击按住不动

            */
            .a1:link{
                color: pink;
                /* font-weight: bold; */
            }
            .a2:visited{
                color: red;
            }
            .a3:hover{
                color: green;
                font-weight: bold;
            }
            .a4:active{
                color: black;
                font-weight: bold;
            }
            .span1{
                color: pink;
            }
            .span2:focus{
                font-weight:bold;
            }
            .span3:hover{
                font-weight: bold;
                color: red;
            }
            .span4:active{
                font-weight: bold;
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="span1">
            <h1>html标签的四个状态</h1>
        </div>
            <div>
                <span class="span1">普通状态</span>
                <br>
                <span class="span2">鼠标焦点,不适用于div</span>css伪类选择器.png

                <br>
                <span class="span3">鼠标经过</span>
                <br>
                <span class="span4">鼠标点击</span>
            </div>

        <a href="http://www.baidu.com" class="a1">未访问</a>
        <br>
        <a href="http://www.baidu.com" class="a2">已访问</a>
        <br>
        <a href="http://www.baidu.com" class="a3">鼠标经过</a>
        <br>
        <a href="http://www.baidu.com" class="a4">鼠标点击</a>

        <!-- 注意事项
        1、未被访问的超链接,是按照href的属性值是否有被访问过而不是看标签
        2、超链接的伪类有4个,如果需要同时设定多个伪类选择器,需要按照顺序设定来写--未访问--已访问--鼠标经过--鼠标点击
         -->
         <br>
         <input type="text" name="" value ="普通状态下字体颜色"class="span1">
         <br>
         <input type="text" name="" value="鼠标焦点下的字体颜色"class="span2">
         <br>
         <input type="text" name="" value="鼠标经过的字体颜色" class="span3">
         <br>
         <input type="text" name="" value="鼠标点击时的字体颜色" class="span4">
         <!-- 注意事项
        1、在使用focus时顺序最好还是不要改变
        2、:focus鼠标焦点伪类选择器不是所有标签都可以加载的一般是input,textarea,button,submit    ....
          -->
    </body>
</html>

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/120.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
10月14日

css-简单的调查表单制作

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 7次
css-简单的调查表单制作

     拿到种类型的表单过后,我们首先要分析,这个表单大致的要涉及到html哪些标签属性,从表面上来看,这个表格大概是由3个部分组成,主题,标题,内容,把这3个确定好了过后,后面就是直接调用css样式了。下面直接放出代码    <!DOCTYPE html><html><head>    <meta charset="utf...

标签 :