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

css--伪类选择器

原创 stpevenchow 84°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)

发表评论:


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

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

推荐阅读
11月25日

php--学习乘方运算,幂运算,哈希散列值,随机数

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 6次
php--学习乘方运算,幂运算,哈希散列值,随机数

<?php学习乘方运算,幂运算,哈希散列值,随机数1,乘方函数,幂函数pow()echo pow('2a', '3a');2的3次方也就是3个2相乘第二个参数,也就是乘方,此处可以为小数参数理论上应该是数字类型,如果是其它类型,会自动转化为数字类型2,求平方根函数sqrt()负数没有平方根,如果参数是负数,返回值为NAN, 表示不存在echo sqrt(9);3,求绝对值函数abs()正数的绝对是其本身,负数的绝对值是正数,0的绝对值是0echo abs(-...

标签 :
11月24日

php--变量检查2

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 7次
php--变量检查2

<?php1, 检查变量是否是null有3种判断方式is_null()isset()empty()首先先说is_null得判断范围1、未定义的变量 $var = '';var_dump(is_null($var));变量不存在,会报错,返回值为true    2、定义未赋值的变量     $int;var_dump(is_null($int));3、被销毁的变量4、赋值为null的变量 ...

标签 :
11月22日

php--变量检查

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 8次
php--变量检查

<?php// 特点:// 1,都只能有一个参数// 2,根据检查类型,符合的返回true,不符合返回false// 1,检查是否是整数 is_int()// 检查变量,如果存储数据为整数,返回true// 检查变量,如果存储数据不是整数,返回false$var = 'abc';var_dump(is_int($var));// 2,检查是否是浮点数 is_float()$var = 1000;var_dump(is_float($var));// 3,检查是否是数值 is...

标签 :
11月21日

php--常量

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 9次
php--常量

 <?php常量通过define()函数来自定义常量参数:1,定义得常量名称,需要时字符串格式2,定义得常量数值,数值必须是标量类型3,第三个参数,不使用如果需要对自定义常量进行数据修改,只能在第一次定义得define()函数中,对定义得数据进行修改define('rm', 15);echo rm;输出结果是15 $int = rmvar_dump($int);输出结果int(15)问题1,不能对常量进行赋值或者修改2,也不能对同一个自定义常量进行多次定...

标签 :
11月20日

php--其它类型转化为数字

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 9次
php--其它类型转化为数字

<?php/*其它类型转化为数字多出现于计算boolean true     1false    0字符串:从字符串左侧起,只转化符合数学形式的部分1, null --- 0*//*$int = 100 + null;echo $int; 输出结果为:1002、true ---1 false ---0*//*$int = 100 + true;echo $int; 输出结果101$int = 100 + false;ec...

标签 :