E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理

":" 与 "::" 区别在于区分伪类和伪元素

重点：E::before、E::after

是一个行内元素，需要的时候可以自行转换成块元素

：before 伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。语法结构是：

<元素>:before {

      content:文字/url(图片的路径 )

}

content 属性用来指定需要插入的具体内容，该内容可以是文本也可以是图片

：after 选择器

图片和文字是在一行的，如果宽度不够，图片就掉下去。

伪元素选择器：before 以及 ：after的更多相关文章

  1. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  2. css伪元素选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. CSS_03_04_CSS伪元素选择器

    第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器 :状态 效果顺序:L V H A */ a:link.lin_01{/*超链接,未 ...

  4. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  5. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  6. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  7. 前端-CSS-4-伪类选择器&伪元素选择器

    1.伪类选择器(爱恨原则) -------------------------------------------------------------------------------------- ...

  8. 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

  9. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  10. css 伪元素选择器

    /*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...

随机推荐

  1. iOS 7的手势滑动返回

    如今使用默认模板创建的iOS App都支持手势返回功能,假设导航栏的返回button是自己定义的那么则会失效,也能够參考这里手动设置无效. if ([self.navigationController ...

  2. 锁粒度 Deadlocks

    锁粒度 MySQL :: MySQL 5.7 Reference Manual :: 14.5.2.4 Locking Reads https://dev.mysql.com/doc/refman/5 ...

  3. Latex 5: LaTeX资料下载

    转: LaTeX资料下载 最全latex资料下载   LaTeX命令速查手册1  

  4. G.易彰彪的一张表

    易彰彪最近有点奇怪,一向爱打游戏他最近居然盯着一张全是大小写字母的表在看,好像在找什么东西.他说,这是他女神给他的一张表,他需要回答女神的问题——在忽略大小写(即大写字母和小写字母视为同一字母)的情况 ...

  5. FAT和FAT32文件系统的原理

    [转自] http://www.sjhf.net/Article/sjhfdoc/200404/1.html 一.硬盘的物理结构:     硬盘存储数据是根据电.磁转换原理实现的.硬盘由一个或几个表面 ...

  6. Web前端性能优化经验分享

    最近一直有给新同学做前端方面的培训,也有去参与公司前端的招聘,所以把自己资料库里面很多高效且有用的知识做了些 规整分类,然后再分享一篇关于前端优化方面的总结.而且春节一过就又是招聘的高峰期了,在校的. ...

  7. C#参数数组的用法1

    C# 参数数组 有时,当声明一个方法时,您不能确定要传递给函数作为参数的参数数目.C# 参数数组解决了这个问题,参数数组通常用于传递未知数量的参数给函数. params 关键字 在使用数组作为形参时, ...

  8. Python里的一些注释规范

    写代码注释是一件很重要的事情,如果你写的一段函数给别人调用那么往往都需要配上一些基本的注释.写好代码可以让别人容易阅读你的代码.试想一 下:如果你在github上面找到一段你想要的代码,这段代码有20 ...

  9. Opencv实现简易播放器

    实现了在MFC中显示图片,再要显示一个视频就是轻而易举的事了,本篇介绍使用Opencv制作一个简易的播放器,实现打开文件.暂停.继续播放.再次播放和总\当前帧数显示功能. 首先还是先看一下界面效果: ...

  10. SPOJ:Strange Waca(不错的搜索&贪心&剪枝)

    Waca loves maths,.. a lot. He always think that 1 is an unique number. After playing in hours, Waca ...