<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .ha{

                 text-align: center;

                 width: 200px;

                 height: 200px;

                 background-color: green;

             }

             /*hover:鼠标悬停后有动态解释效果*/

             .ha:hover{

                 width: 500px;

                 height: 500px;

                 background-color: yellowgreen;

             }

             /*after:在元素里面的尾部插入内容*/

             .ha:after{

                 content: '!!!!';

                 background-color: red;

             }

             /*before:在元素里面的头部插入内容*/

             .ha:before{

                 content: '$$';

                 color: darkblue;

             }

         </style>

     </head>

     <body>

         <div class="ha" >伪类及伪元素选择器</div>

     </body>

 </html>

CSS-05-伪类及伪元素选择器的更多相关文章

  1. 【CSS】伪类和伪元素选择器

    伪类 基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link  规定所有未被点击的链接: a:visited  匹配多有已被点击过的链接: a:active  匹配所有鼠标按下 ...

  2. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  3. css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

    CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...

  4. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  5. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  6. CSS 高级：尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

  7. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  8. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

  9. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  10. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

随机推荐

  1. Vue通讯

    vue组件通讯 #props传递数据 父->子 //父组件传递数据 <template> <Children :data="msg"></Chi ...

  2. TCP/IP||ICMP

    1.概述 ICMP为IP组成部分之一,传递差错报文并返回用户进程,在IP数据报内部被传输 类型字段可以有15个不同的值,以描述特定类型的ICMP报文,检验和字段覆盖整个ICMP报文. 2.报文类型 在 ...

  3. windows下mysql免安装版配置（踩过的坑）简记

    下载 从官网(https://dev.mysql.com/downloads/mysql/)下载 这里的免安装版本的,相对来说干净,但是需要自己来配置很多东西. 配置 首先是注册windows的服务. ...

  4. Docker Swarm Mode简介与核心概念

    什么是Docker Swarm Docker Swarm是Docker官方的一种容器编排方案,用于管理跨主机的Docker容器,可以快速对指定服务进行水平扩展.部署.删除 一个Docker Swarm ...

  5. 20191121-3 Final阶段贡献分配规则

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/10063 ”组长”组final阶段贡献分分配规则 组里五位成员分别有入团队 ...

  6. 基于Github Pages + docsify，我花了半天就搭建好了个人博客

    目录 前言 一些说明 准备工作 上docsify官网看一看 使用docsify命令生成文档站点 部署到Github上 写在最后 前言 "作为一个真正的码农,不能没有自己的个人博客" ...

  7. day4（dict和set）

    dict 内置字典,使用key-value存储,具有极快的查找速度. >>>d = {'michael': 95, 'bob': 75, 'tracy': 85} >>& ...

  8. Java对象头与锁

    对象由多部分构成的,对象头,属性字段.补齐区域等.所谓补齐区域是指如果对象总大小不是4字节的整数倍,会填充上一段内存地址使之成为整数倍. 后面两个很好理解,今天我主要想总结一下对象头: 对象头这部分在 ...

  9. 使用PE启动盘清空电脑登入密码

    1.PE启动盘制作过程 要制作一个启动盘可以使用很多工具来制作,比如老毛桃.U深度.大白菜等软件都可以制作PE启动盘.此处就用老毛桃制作PE启动盘为例(http://www.laomaotao.tv/ ...

  10. hexo搭建博客系列(三)美化主题

    文章目录 其他搭建 1. 添加博客图标 2. 鼠标点击特效(二选一) 2.1 红心特效 2.2 爆炸烟花 3. 设置头像 4. 侧边栏社交小图标设置 5. 文章末尾的标签图标修改 6. 访问量统计 7 ...