css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类—— :hover, :active, :visited, :focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容（可以是文字，图标等，下图就是一个正方形图标，图标是通过css绘制的）。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。但是在开发者工具模式下可以看到形如“::before”字段。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标

参考：1、http://www.cnblogs.com/keyi/p/5943133.html

　　   2、http://www.w3school.com.cn/css/css_pseudo_elements.asp

CSS的伪元素和伪类的更多相关文章

  1. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  2. CSS伪元素与伪类的区别

    伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...

  3. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  4. CSS和CSS3中的伪元素和伪类（总结）

    好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...

  5. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  6. CSS（二）- 选择器 - 伪元素和伪类（思维导图）

    伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...

  7. CSS——伪元素与伪类

    伪类与伪元素 伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :vi ...

  8. css 选择器 & UI元素的伪类选择器 & 伪元素选择器

    UI元素的伪类选择器 1. :focus  用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable  用来指定元素处于不可用时的状态    表单里应用 ...

  9. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

随机推荐

  1. bzoj1040 内向树DP

    2013-11-17 08:52 原题传送门http://www.lydsy.com/JudgeOnline/problem.php?id=1040 N个骑士,每个人有一个仇人,那么,每个骑士只有一个 ...

  2. ubuntu 安装wxpython以及boa-constructor

    直接参考 官方的安装文档. 学习python 的时候就 用 wxPython . 那个时候用的是windows 的版本. 现在 用 ubuntu 下开发了.没有搭建好环境. 其实就一句话: sudo ...

  3. 转：在android中button响应的两种方式

    1. 在布局文件中添加button的监听名字 Android:onClick="buttonOnClick" 例如: <Button android:id="@+i ...

  4. Linux上使用程序相对路径访问文件【转】

    转自:http://blog.csdn.net/yinxusen/article/details/7444249 今天一个朋友问我这个问题,说为什么在Windows上跑得很好的应用程序,移植到Linu ...

  5. 如何在 Linux 上锁定虚拟控制台会话

    当你在共享的系统上工作时,你可能不希望其他用户偷窥你的控制台中看你在做什么.如果是这样,我知道有个简单的技巧来锁定自己的会话,同时仍然允许其他用户在其他虚拟控制台上使用该系统.要感谢 Vlock(Vi ...

  6. php7安装及和php5的共存

    http://blog.csdn.net/liuxinmingcode/article/details/50319145 http://www.jb51.net/article/109228.htm ...

  7. python中的三元表达式

    if B = True: return A else: return C 用三元表达式可以写成: return A if B else C

  8. ionic3 打包发布，以安卓说明

    1 添加图标 ionic cordova resources [<platform>] 官方https://ionicframework.com/docs/cli/cordova/reso ...

  9. [BZOJ2653]middle 主席树+二分

    2653: middle Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 2042  Solved: 1123[Submit][Status][Disc ...

  10. （五）mysql表操作和约束条件

    (1)表基本操作 1)创建表 create table 表名(字段 数据类型 约束条件) mysql> create table student1(id int,name varchar(50) ...