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. AJAX核心XMLHTTPRequest对象

    老早就写好了总结.今天整理发表一下. XMLHttpRequest对象是AJAX的核心技术,XMLHttpRequest 是XMLHTTP 组件的对象,通过这个对象.AJAX能够像桌面应用程序一样仅仅 ...

  2. zabbix基于SNMP 协议监控路由器

    zabbix基于SNMP 协议监控路由器 步骤 步骤超级方便. 1. 路由器上开启snmp 2. 确保外网能訪问到 3. 用snmpwalk測试 4. 加入zabbix主机,SNMP interfac ...

  3. diamond简介和使用

    简介 diamond是淘宝内部使用的一个管理持久配置的系统,它的特点是简单.可靠.易用,目前淘宝内部绝大多数系统的配置,由diamond来进行统一管理. diamond为应用系统提供了获取配置的服务, ...

  4. Android应用之——最新版本号SDK V2.4实现QQ第三方登录

    为什么要写这篇博客呢?由于.我在做这个第三方登录的时候,找了非常多资料,发现要么就是过时了.要么就是说的非常不清楚.非常罗嗦.并且非常多都是一些小demo,不是什么实例.甚至连腾讯官方的文档都有这个问 ...

  5. python 1: 解决linux系统下python中的matplotlib模块内的pyplot输出图片不能显示中文的问题

    问题: 我在ubuntu14.04下用python中的matplotlib模块内的pyplot输出图片不能显示中文,怎么解决呢? 解决: 1.指定默认编码为UTF-8: 在python代码开头加入如下 ...

  6. gson如何转化json数组

    String.JsonObject.JavaBean 互相转换 User user = new Gson().fromJson(jsonObject, User.class); User user = ...

  7. Mac JDK 多版本共存

    1.    安装各JDK版本,安装后通过Java -version检测是否安装好    2.    打开~/.bash_profile,没有的话创建    vim ~/.bash_profile   ...

  8. POJ2976 Dropping tests —— 01分数规划 二分法

    题目链接:http://poj.org/problem?id=2976 Dropping tests Time Limit: 1000MS   Memory Limit: 65536K Total S ...

  9. Android Studio 3.0.1模拟器启动报错Emulator: glClear:466 GL err 0x502

    启动模拟器时,报了一大堆以上错误 启动起来之后, Emulator的画面没有正常显示, 点击鼠标会闪烁, 有时还会上下颠倒 有可能是驱动版本太低不支持一些特性,因此就下载个驱动精灵.升级了显卡驱动,结 ...

  10. Caused by: java.lang.IllegalArgumentException: Malformed \uxxxx encoding.

    application.properties中不能含有\符号.  只要遇到就会报这个错误. 解决方式:将application.properties中的 \ 改为 \\ 或者 /