<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        /*LoVeHAte*/

        a:link{/*link 未被点击的链接*/

            color: blueviolet;

        }

        a:visited{/*已被点击的链接*/

            color: blue;

        }

        a:hover {/*鼠标悬停其上的元素  这个一定要掌握*/

            color: red;

            background: aqua;

            font-size: 20px;

            /*cursor: pointer; 手指*/

            /*cursor: default; 箭头*/

            /*cursor: wait; 等待*/

            /*cursor: help;帮助*/

         }

        a:active{/*鼠标已经再其上按下但是还没有释放的元素*/

            color: yellowgreen;

        }

        div{

            width: 50px;

            height: 50px;

            background: aqua;

        }

        /*改变的是div本身*/

        /*!*div:hover{*! */

            /*width: 100px;*/

            /*height: 100px;*/

            /*background: bisque;*/

        /*}*/

        p{

            width: 20px;

            height: 20px;

            background: red;

            display: none;

        }

        /*改变的是div的后代 p元素*/

        div:hover p{

            width: 30px;

            height: 30px;

            background: blue;

            display: block;

        }

    </style>

</head>

<body>

    <a href="http://www.baidu.com">去百度</a>

    <div>

        <p></p>

    </div>

</body>

</html>

html-伪类的更多相关文章

  1. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  3. CSS权威指南之css声明，伪类，文本处理--(简要笔记一)

    1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...

  4. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. 伪类before和after

     以你添加的元素为基础!在他的里面!也就是他的内容的前面或者后面添加东西!  如果原来的元素没有内容会出现什么情况?(伪类的宽和高和元素的相等)

  6. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  7. 利用伪类:before&&:after实现图标库图标

    一.实现如下效果 二.代码实现思路 图案一源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  8. CSS笔记之伪类与伪元素

    伪类分为两种:UI伪类 与 结构化伪类 UI伪类:a:link{}    a:hover{}   a:active{}  a:visited{} input[type='text']:focus{} ...

  9. W3School-CSS 伪类 (Pseudo-classes) 实例

    CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...

  10. <a>链接的四个伪类顺序

    <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...

随机推荐

  1. 5)django-模板

    django模板显示页面 一:语法使用 1)变量:{{变量名}}         2)for循环            {% for row in userlist%}                 ...

  2. Confluence 6 配置避免管理员联系表单垃圾

    你可以配置 Confluence 使用验证码(Captcha)来避免垃圾内容发送给 Confluence 管理员.有关管理员联系表单验证码的内容在全站验证码设置中进行配置,相关的文档请参考 Confi ...

  3. bat如何创建多级文件夹(在android设备中)

    在android设备中要创建多个或者多级文件夹时,手动去创建费时费力(有点傻),一个bat文件就能很好的实现这个功能. 1.首先创建同级多个文件夹且在该文件夹下生成一个文件 @echo off ech ...

  4. 利用map和stringstream数据流解题

    题目描述 喜闻乐见A+B.读入两个用英文表示的A和B,计算它们的和并输出. 输入 第一行输入一个字符串,表示数字A:第二行输入一个字符串表示数字B.A和B均为正整数. 输出 输出一个正整数n,表示A+ ...

  5. LeetCode（125）：验证回文串

    Easy! 题目描述: 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, ...

  6. LeetCode（106）：从中序与后序遍历序列构造二叉树

    Medium! 题目描述: 根据一棵树的中序遍历与后序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 中序遍历 inorder = [9,3,15,20,7] 后序遍历 posto ...

  7. bzoj 4715

    其实我并没有见过原题,只是因为...这被改编成了互测题... 题目中提到了一个序列,这个序列是很重要的,否则这个问题好像是没有合理的时间复杂度解法的 但正因为有了这个序列,这个问题的时间复杂度才让人能 ...

  8. Allegro PCB Design GXL (legacy) 将指定的层导出为DXF

    Allegro PCB Design GXL (legacy) version 16.6-2015 1.菜单:Display > Color/Visibility... 2.打开Color Di ...

  9. linux把程序做成系统服务并自启动

    chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 一.chkconfig 的使用语法1.c ...

  10. jenkins 回滚发布

    #jenkins拉取文件路径 workspace=/data/wos/testtemp #备份路径 backspace=/data/wos/back #不能提Git的文件 config=/data/w ...