<!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. 用mingw静态编译Qt4.8.2和Qt5.1.1（需要修改不少源码）

    因为一些乱七八糟的原因,我需要用mingw静态编译Qt4.8.2和Qt5.1.1.经历了一天的折腾之后,自觉编译一下Qt还是件颇为麻烦的事情,故将过程略作总结,以备不时之需. 首先,在编译之前,我需要 ...

  2. hibernate映射-继承映射

    对于面向对象的程序设计语言而言,继承和多态是两个最基本的概念.Hibernate的继承映射可以理解成持久化类之间的继承关系.例如:人和学生之间的关系.学生继承人,可以认为学生是一个特殊的人,如果对人进 ...

  3. vue项目使用websocket做聊天项目总结

    一.首先我们先了解一下websocket的使用: 1.创建websocket const ws = new WebSocket("ws://192.168.31.136:9998/ws&qu ...

  4. 正基AP6212固件

    需要正基技术资料联系我   QQ507014762  电话17666215391 #AP6212_NVRAM_V1.0.1_20160606 2.4 GHz, 20 MHz BW modeThe fo ...

  5. Python socket套接字通信

    一.什么是socket? socket是一个模块, 又称套接字,用来封装 互联网协议(应用层以下的层). 二.为什么要有socket? socket可以实现互联网协议 应用层以下的层 的工作,提高开发 ...

  6. echart环形图制作及出现的一些问题总结

    环形图的形成其实就是echarts中的饼图pie,控制饼图的内圈半径和外圈半径来形成环形的效果!下面记录的问题是在开发中出现发现的,因为在网上找到了利用阴影来做下面的图: 说明: 由于代码比较长,不能 ...

  7. 关于KMP的一点思考

    关于KMP的一点思考 KMP的\(next\)数组的性质很精妙,有必要开一个坑学习一下 Part 1 啥是next \(next[i]\)表示对于\(pre_i\)这个字符串,这个抠出来的字符串本身后 ...

  8. 洛谷$2014$ 选课 背包类树形$DP$

    luogu Sol 阶段和状态都是树形DP板子题,这里只讲一下背包的部分(转移)叭 它其实是一个分组背包模型,具体理解如下: 对于一个结点x,它由它的子结点y转移而来 在子结点y为根的树中可以选不同数 ...

  9. Java 自增、自减

    i++/i-- 先使用变量的值,然后改变该变量的值: ++i/--i 先改变该变量的值,然后使用变量的值: : i = i++; 最终变量i的值到底是变成1呢还是保持为0呢? java中变量自增.自减 ...

  10. springboot-实现文件下载

    一 前言 本文实现的文件下载是使用Apache 的 commons-fileupload 实现:在之前的springboot系列文件中已经讲述过如何实现多文件上传:这篇文件实现的文件下载功能主要是能在 ...