css中的伪元素,我今天记住了!o~yeah
对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中。带着这样的思维去面试的我,常常碰壁,当人事问我会什么的时候,我说我会百度,然后就没有然后了……笑话不多说,进入今天的正题!
先上张图片,毕竟有图有真相嘛~
这是我在慕课网上练习切图技能时,老师在视频中演示的案例,我刚开始也是跟着视频一点点切,可以说全部代码都是Copy过来的,后来有感觉了,就自己动手,遇到不会的地方,在看看视频,今天在切这个地方的时候,按照自己的想法,用的是margin居中,后来就碰到问题了,“怎么为下方添加一个白色的三角形呢?”,于是我就去看视频,视频中用的是position定位,通过添加伪类的方式在红色方框的下方添加了白色三角形。原视频代码如下:
查看第一张图(html)红色方框中只有两个元素,一个div元素和p元素;在第二张图(css)通过添加一个:after伪类元素的方式,添加一个白色三角形,来达到最终的效果。下面是我的:
第一张图(html)红色方框中也是两个元素,两个div,第二个div添加了一个triangle的class;第二张图的css代码没有进行修改,只是去掉了了一个position:absolute。
那么伪元素是什么?有什么用是不是就体现出来了?我的理解是:通过伪元素可以添加一个在html代码中“看不到的html”元素,但在浏览器页面能够看到效果。如上面两个例子最终呈现的效果是一样的。
当然如果你有更好的理解方式或结论请留言~谢谢
css中的伪元素,我今天记住了!o~yeah的更多相关文章
- 理解 CSS 中的伪元素 :before 和 :after
CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...
- CSS中的伪元素选择器
定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...
- CSS中如何让元素隐藏
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- CSS中的伪类与伪元素
在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...
- CSS 中的伪类和伪元素
伪类(Pseudo classes) 由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和 class 有些类似, ...
- css伪选择器使用总结——css中关于伪类和伪元素的知识总汇
CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...
随机推荐
- python学习过程(四)
上节我们说了怎么从一个网页中获取所有的a标签,包括a标签的文本和a标签的url,以及最后经过整理,直接从网页中获取key-value键值对,也就是标签:url这种形式. 例如 : 百度: http:/ ...
- CF1100E Andrew and Taxi 二分答案+拓扑排序
\(\color{#0066ff}{ 题目描述 }\) 给定一个有向图,改变其中某些边的方向,它将成为一个有向无环图. 现在求一个改变边方向的方案,使得所选边边权的最大值最小. \(\color{#0 ...
- P1114 “非常男女”计划
题意:给你一个01串,求满足0和1总数相等的最大字串 $n\ \le\ 10^5$ 1.$O(n^3)$枚举起点终点,统计判断是否成立 2.$O(n^2)$先$O(n)$时间计算01个数的前缀和, ...
- 字符串格式化str.format
一.字符串格式化之str.format 1.位置参数:用{0},{1},{2}表示位置 v1 = '{1},{0},{1}'.format('a','b') #输出b,a,b 2.关键词参数:用{na ...
- kuangbin专题七 ZOJ1610 Count the Colors (灵活线段树)
Painting some colored segments on a line, some previously painted segments may be covered by some th ...
- 3D电影转2D普通电影,电脑上看
下了一些电影,打开发现是左右两个一样的画面,什么情况?原来这就是传说中的3D,怎么像正常电影一样的看呢?第一反应去搜3D眼镜,价钱倒是不贵,但是不应急呀,肿么办?以下是观看方法: 一.看电脑上有QQ影 ...
- AngularJS中【Error: [$rootScope:inprog]】的解决办法
AngularJs脏数据检查冲突 Error: [$rootScope:inprog] http://errors.angularjs.org/1.5.8/$rootScope/inprog?p0=% ...
- 从M进制转换为N进制
/// <summary> /// 从M进制转换为N进制 /// </summary> internal class MBase2NBase { /// <summary ...
- A reader
A reader lives a thousand lives before he die... The man who never reads lives only one.
- Ubuntu14.10:Install Apache,PHP,Mysql以及扩展库
step 1: Apache sudo apt-get install apache2 After have apache2 installed, go to localhost by browser ...