<!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. gradle 打包后第三方登录不上

    使用 gradlew clean assembleReleaseChannels 生成不用的渠道包后 第三方登录不上 原因:打包未设置好APP的 .keystore

  2. STVD、IAR两种编译器比较

    1.全局查找功能: STVD:全局查找功能全局查找功能比较麻烦,有3个动作. IAR:有全局查找功能比较方便,只要一个动作,和KEIL一样. 2.编译时间 STVD:相对比较慢. IAR:相对快点. ...

  3. 安装 Daloradius

    安装Mariadb yum install -y mariadb-server mariadb systemctl start mariadb systemctl enable mariadb 初始设 ...

  4. shell点名脚本不重复人名

    效果如图: 代码如下: #!/bin/bash #Author:GaoHongYu #QQ: #Time:-- :: #Name:dm.sh #Version:V1. stu=(刘一 陈二 张三 李四 ...

  5. 讲真，这两个IDE插件，可以让你写出质量杠杠的代码

    昨晚躺在床上看<拯救大兵瑞恩>的时候,不由得感叹道:"斯皮尔伯格的电影质量真高,片头真实地还原了二战的残酷性."看完后,我的精神异常的亢奋,就想写篇文章来帮助大家提高一 ...

  6. 微信小程序订阅消息，我踩过的坑都在这里了！

    旧的模板消息将在 2020 年 1 月 10 号全面下架,也就是今天,不过貌似现在还可以用!!!我已经改好了,只不过还没有上线,准备坚持到最后一天! 0.订阅消息 简单介绍一下订阅消息的特点: 用户授 ...

  7. ACM北大暑期课培训第二天

    今天继续讲的动态规划 ... 补充几个要点: 1. 善于利用滚动数组(可减少内存,用法与计算方向有关) 2.升维 3.可利用一些数据结构等方法使代码更优  (比如优先队列) 4.一般看到数值小的 (十 ...

  8. Shell脚本实现DB2数据库表导出到文件

    该Shell脚本用于实现将DB2数据库表导出到文件,将在另一篇博文<Java代码调用Shell脚本并传入参数实现DB2数据库表导出到文件>中通过Java代码实现调用该脚本并传入参数. #! ...

  9. 读取Core下的appsettings.json的值的时候中文乱码

    这个百度一下一大堆,我就用的这个:然后重新生成一次就好了. 2.有的是更改VS的什么高级保存之类的,我记得之气设置过, 然后就是:这篇文章

  10. 「1.0」一个人开发一个App，小程序从0到1，起航了

    古有,秦.齐.楚.赵.魏.韩.燕七国争雄:今有,微信.QQ.百度.支付宝.钉钉.头条.抖音七台争霸.古有,白起.李牧.王翦.孙膑.庞涓.赵奢.廉颇驰骋疆场:今有程序员1,程序员2,程序员3…编写代码. ...