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. XML Schema笔记

    XML Schema是为了弥补DTD的不足而开发的一种新的用于约束和规范XML文档的标准 XML Schema作用: 定义可出现在文档中的元素定义可出现在文档中的属性定义哪些元素是子元素定义子元素的次 ...

  2. 【网络协议】IP协议、ARP协议、RARP协议

    IP数据报 IP是TCP/IP协议族中最核心的协议,全部的TCP.UDP.ICMP.IGMP数据都以IP数据报的格式传输.IP仅提供尽力而为的传输服务.假设发生某种错误.IP会丢失该数据.然后发送IC ...

  3. Testng 运行报错:"Total tests run: 0, Failures: 0, Skips: 0"以及找不到class文件的问题

    "Total tests run: 0, Failures: 0, Skips: 0" This means that there were no tests executed a ...

  4. ARC机制之__strong具体解释

    ARC机制之__strong具体解释 __strong  解析: 默认情况下,一个指针都会使用 __strong 属性,表明这是一个强引用.这意味着,仅仅要引用存在,对象就不能被销毁.这是一种所期望的 ...

  5. HDU 6138 Fleet of the Eternal Throne 后缀数组 + 二分

    Fleet of the Eternal Throne Problem Description > The Eternal Fleet was built many centuries ago ...

  6. Kubernetes实战阅读笔记--1、介绍

    1.业界根据云计算提供服务资源的类型将其划分为三大类: 基础设施即服务(Infrastructure-as-a-Service,IaaS).平台即服务(Platform-as-a-Service,Pa ...

  7. Golang 现有的哲学中,要求你尽量手工处理所有的错误返回

    更优雅的 Golang 错误处理 - Go语言中文网 - Golang中文社区 https://studygolang.com/articles/9407

  8. 推断php操作mysql(添删改查)是否成功

    近期在使用CI框架 , 可是里面的数据库操作没有ThinkPhp方便 , 不知道数据库操作的反馈信息 , 仅仅好借助原生方法来推断是否操作数据库成功 推断php操作mysql(添删改查)是否成功,主要 ...

  9. 用Delphi7 调用.NET 2.0的WebService 所要注意的问题(Document格式和UTF8编码)

    Delphi7 调用VS.NET 2005开发的基于.NET 2.0的WebService时发生了错误.查阅资料 http://www.community.borland.com/article/bo ...

  10. js程序开发-1

    <h1>数组的常用操作</h1> push() 方法可向数组的末尾添加一个或多个元素,并返回新数组的长度. unshift() 方法可向数组的开头添加一个或更多元素,并返回新数 ...