<!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. k8s数据持久化实验

    Step 1:创建PV ============================================ apiVersion: v1kind: PersistentVolumemetadat ...

  2. 记录我的 python 学习历程-Day11 两个被忽视的坑、补充知识点、函数名的应用、新版格式化输出、迭代器

    补充知识点 函数形参中默认参数的陷阱 针对不可变数据类型,它是没有陷阱的 def func(name, sex='男'): print(name) print(sex) func('Dylan') # ...

  3. jsqlparser和calcite和druid功能对比

    需求分析:(用其它方法替代metabase中的某些功能)功能1.通过对sql查询语句的分析,得到所有表名,以及所有表的字段名,字段类型,字段注解信息.功能2.在sql语句执行查询前,校验sql语句是否 ...

  4. webhook功能概述

    1.什么是webhook? webhooks是一个api概念,是微服务api的使用范式之一,也被成为反向api,即:前端不主动发送请求,完全由后端推送. 举个常用例子,比如你的好友发了一条朋友圈,后端 ...

  5. $loj530\ [LibreOJ\ \beta\ Round \#5]$ 最小倍数 数论

    正解:数论 解题报告: 传送门$QwQ$! 不想做题,来水点儿简单点的$QwQ$. 一个显然的点在于可以直接对不同质因子分别算$n_{min}$最后取$max$. 这个正确性还是蛮显然的?因为只要有$ ...

  6. $Luogu4403$ 秦腾与教学评估 二分

    $Luogu$ $Description$ 有$N$个数列,求一个$x$,$x$在各个数列中的出现次数之和为奇数.这样的$x$最多存在$1$个.若不存在则输出Poor QIN Teng:( $Sol$ ...

  7. Linux三剑客之sed的基本用法介绍

    [介绍] sed是一款强大的非交互式的文本编辑器,可以对文件文本进行增删改查的相关操作,本文主要是讲解以下sed的基本用法. [常用选项] -e 下一个参数为一个sed指令,一般只会用于同一行有多个s ...

  8. Java迭代器源码解析

    private class Itr implements Iterator<E> { int cursor; // 调用next方法返回的元素的索引 int lastRet = -1; / ...

  9. IteratorPattern(迭代器模式)-----Java/.Net

    迭代器模式(Iterator Pattern)是 Java 和 .Net 编程环境中非常常用的设计模式.这种模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示

  10. [01]java基础回顾

    00 Java语言       由美国SUN公司发明于1995年,是目前业界应用最广泛.使用人数最多的语言,连续多年排名世界第一,可以称之为“计算机语言界的英语”. Java广泛应用于企业级软件开发. ...