对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中。带着这样的思维去面试的我,常常碰壁,当人事问我会什么的时候,我说我会百度,然后就没有然后了……笑话不多说,进入今天的正题!

先上张图片,毕竟有图有真相嘛~

这是我在慕课网上练习切图技能时,老师在视频中演示的案例,我刚开始也是跟着视频一点点切,可以说全部代码都是Copy过来的,后来有感觉了,就自己动手,遇到不会的地方,在看看视频,今天在切这个地方的时候,按照自己的想法,用的是margin居中,后来就碰到问题了,“怎么为下方添加一个白色的三角形呢?”,于是我就去看视频,视频中用的是position定位,通过添加伪类的方式在红色方框的下方添加了白色三角形。原视频代码如下:

查看第一张图(html)红色方框中只有两个元素,一个div元素和p元素;在第二张图(css)通过添加一个:after伪类元素的方式,添加一个白色三角形,来达到最终的效果。下面是我的:

第一张图(html)红色方框中也是两个元素,两个div,第二个div添加了一个triangle的class;第二张图的css代码没有进行修改,只是去掉了了一个position:absolute。

那么伪元素是什么?有什么用是不是就体现出来了?我的理解是:通过伪元素可以添加一个在html代码中“看不到的html”元素,但在浏览器页面能够看到效果。如上面两个例子最终呈现的效果是一样的。

当然如果你有更好的理解方式或结论请留言~谢谢

css中的伪元素,我今天记住了!o~yeah的更多相关文章

  1. 理解 CSS 中的伪元素 :before 和 :after

    CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...

  2. CSS中的伪元素选择器

    定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...

  3. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  4. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  5. CSS中如何让元素隐藏

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...

  6. CSS和CSS3中的伪元素和伪类(总结)

    好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...

  7. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  8. CSS 中的伪类和伪元素

    伪类(Pseudo classes) 由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和 class 有些类似, ...

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

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

随机推荐

  1. P2155 [SDOI2008]沙拉公主的困惑

    \(\color{#0066ff}{ 题目描述 }\) 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞票.房地产第一大 ...

  2. MYSQL常用命令笔记(一)

    1.show databases; 显示数据库 2.create database test; 创建数据库test 3.use test: 使用这个数据库 4.创建表class: create tab ...

  3. Ant junitreport with Maven

    大家可能都知道在Ant里可以使用junit和junitreport两个task来完成对测试结果生成HTML格式的报告. Maven里的Surefire-report的插件只能对Java测试报告支持的比 ...

  4. liunx postfix与sendmail 开启与关闭

    1:检查sendmail服务的状态 service sendmail status 2:开启sendmail服务 service sendmail start 3:关闭sendmail服务 servi ...

  5. C语言中变量、全局变量与变量的作用域

    什么是变量: 变量常量都是表征数据的一种形式:常量用来表示数据的值: 变量不仅可以用来表示数据的值:还可以用来存放数据:因为变量对应着一定的内存单元: 变量和常量必须先定义后使用. 变量名和常量名都是 ...

  6. CF D Bicolorings

    题意 给一个2行n列的矩阵填上黑色和白色,求连通块个数为k个的填色方案数量(mod 998244353)   因为只有两行,为n-1列的矩阵增加1列的情况数只有很少,容易想到用 (i,k) 表示 i  ...

  7. 微信小程序填坑之旅

    一.解决scroll-view的滚动条问题 1.出现场景css. 有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动.而在单页的css样式中加入特定代码不能影响到全局的样式 2 ...

  8. java mybatis学习一

    1.引入maven包 和 导入 sqljdbc包 <dependency> <groupId>org.apache.ibatis</groupId> <art ...

  9. SQL全文搜索引擎 Sphinx

    Sphinx是一个基于SQL的全文检索引擎,可以结合MySQL,PostgreSQL做全文搜索, 它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索.   Sphinx特别 ...

  10. SpringBoot2.0.3整合Quartz2.3.0实现定时任务

    转载:https://www.cnblogs.com/ealenxie/p/9134602.html 关于别人写的quartz学习的地址:https://blog.csdn.net/lkl_csdn/ ...