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 在 ...
随机推荐
- java8 获取某天最大(23:59:59)和最小时间(00:00:00)
public class DateUtil { // 获得某天最大时间 2018-03-20 23:59:59 public static Date getEndOfDay(Date date) { ...
- javascript小菜单—demo
<!DOCTYPE html><html><head> <title></title></head><body>&l ...
- 21.Longest Palindromic Substring(最长回文子串)
Level: Medium 题目描述: Given a string s, find the longest palindromic substring in s. You may assume ...
- kuangbin专题十二 HDU1114 Piggy-Bank (完全背包)
Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- PAT天梯赛 L1-049 天梯赛座位分配
题目链接:点击打开链接 天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i 所学校有 M[i] ...
- 洛谷 P2982 [USACO10FEB]慢下来Slowing down
题目描述 Every day each of Farmer John's N (1 <= N <= 100,000) cows conveniently numbered 1..N mov ...
- ssm中实现excle导入导出
1 pom.xml <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-oox ...
- 解决maven项目中有小红叉的问题
首先在window--perferences--showview中显示problems中查看出错的原因
- Linux网络编程基础
1. Linux网络模型 ① OSI七层模型和Linux四层模型 ② 各种协议之间的关系及在Linux模型中的位置 ③ 协议封装:各种协议处于一种层层封装的关系 (1)Ethernet (2)IP * ...
- python学习第二天a
首先 python 是一门解释型弱类型的高级编程语言. 变量命名规范有8条,要时刻牢记于心.紧接着又回顾了其他的知识点 常量:不存在绝对的常量.所有的字母大写就是常量. 今日所学内容: 1.循环 wh ...