<!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. python-面向对象(绑定方法与非绑定方法)

    一.绑定方法: 绑定给谁就应该由谁来调用,谁来调用就会将谁当做第一个参数传入 1.绑定给对象的方法:类中定义的函数默认就是绑定给对象的,自动将对象当作第一个参数传入,类也可以调用,但是不会自动传值 2 ...

  2. Android PermissionUtils:运行时权限工具类及申请权限的正确姿势

    Android PermissionUtils:运行时权限工具类及申请权限的正确姿势 ifadai 关注 2017.06.16 16:22* 字数 318 阅读 3637评论 1喜欢 6 Permis ...

  3. 洛谷P4117 [Ynoi2018]五彩斑斓的世界 [分块,并查集]

    洛谷 Codeforces 又是一道卡常题-- 思路 YNOI当然要分块啦. 分块之后怎么办? 零散块暴力,整块怎么办? 显然不能暴力改/查询所有的.考虑把相同值的用并查集连在一起,这样修改时就只需要 ...

  4. IOS UINavigationController 更改返回按钮

    UIButton *back = [UIButton buttonWithType:UIButtonTypeCustom]; back.titleLabel.font = [UIFont boldSy ...

  5. Java之动手动脑(三)

    日期:2018.10.12 星期五 博客期:017 这次留了两个动手动脑作业!我需要一个一个来说!先说第一个吧! Part 1 :随机生成1000个随机数 代码: //以下为 RandomMaker. ...

  6. HTML&javaSkcript&CSS&jQuery&ajax(四)

    一.HTML创建响应设计 Responsive Web Design 可以改变尺寸传递网页,对于平板和移动设备是必须的 1.<!DOCTYPE html><html lang=&qu ...

  7. 20165314 2016-2017-2 《Java程序设计》第3周学习总结

    20165314 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 类体包含成员变量和域变量 局部变量只在方法内有效 对象的创建以及对象对自己变量和方法通过用. ...

  8. Python变量的作用域

    局部变量 局部变量是指在函数内部定义并使用的变量,他只在函数内部有效.即函数内部的名字只在函数运行时才会创建,在函数运行之前或者运行完毕之后,所有的名字就都不存在了.所以,如果在函数外部使用函数内部定 ...

  9. Java利用POI读取Excel

    官网直接下载POI  http://poi.apache.org/ package com.CommonUtil; import java.io.File; import java.io.FileIn ...

  10. Python3 zip() 函数

    描述 zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的对象,这样做的好处是节约了不少的内存. 我们可以使用 list() 转换来输出列表. 如果 ...