CSS的伪元素和伪类
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的伪元素和伪类的更多相关文章
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- CSS伪元素与伪类的区别
伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...
- css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- CSS 基础 例子 伪元素和伪类 & 区别
一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...
- CSS(二)- 选择器 - 伪元素和伪类(思维导图)
伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...
- CSS——伪元素与伪类
伪类与伪元素 伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :vi ...
- css 选择器 & UI元素的伪类选择器 & 伪元素选择器
UI元素的伪类选择器 1. :focus 用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable 用来指定元素处于不可用时的状态 表单里应用 ...
- css3 伪元素和伪类选择器详解
转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...
随机推荐
- JGroups 初探
最近研究 JAVA 集群技术,看到 jgroups 这个框架,网上有些例子,非常简单.可以参考其官方网址:http://www.jgroups.org/manual/index.html按捺不住,自己 ...
- 01-UIDynamic简单演练demo源代码
源代码下载: 01-简单演练.zip72.0 KB // // ViewController.m // 01.简单演练 // // Created by apple on 13-12-24. / ...
- bzoj 1878 SDOI2009树状数组 离线操作
本来想写2120的,结果想起来了这个 我们先对于询问左端点排序,用树状数组存区间字母个数,对于每种字母, 第一次出现的位置记录为1,剩下的记录为0,然后记录下,每种颜色 后面第一个和他相同颜色的位置 ...
- 使用dd命令克隆整个系统
神奇的ghost的原理是什么呢?不就是数据复制吗?Linux下的dd命令不就是最强大的数据复制工具! 既然如此,我为什么要使用g4l这样复杂的工具呢?一条dd命令不就可以帮我实现任意 ...
- mysql六:索引原理与慢查询优化
一 介绍 为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句 ...
- python基础===文件对象的访问模式,以及计数循环的使用方法
案例一: 一个几M的文本文件,需要每隔100行写到新的文件中. 代码实现如下: with open(r'f:\book.txt','rb') as f1: with open(r'f:\book2.t ...
- redis使用中的常见错误
1.2016年12月17日 启动redis报错,错误信息如下: 解决办法:redis没有正常关闭(redis安装在虚拟机上,直接杀死了虚拟机进程) 导致redis.pid文件一直被锁定,重启redi ...
- elasticsearch SpanNearQuery inOrder参数
一直没有注意还有一个inOrder参数: public SpanNearQuery(SpanQuery[] clauses, int slop, boolean inOrder) When inOrd ...
- ubuntu 16.04安装redis群集zz
之前有文章,写明了如何安装redis.这里,进行群集配置. 创建Redis配置目录 /etc/redis: $ sudo mkdir /etc/redis/redis_cluster $cd /etc ...
- xshell连接虚拟机CentOS出现eth0 device not found的解决方法
昨天用xshell连接虚拟机上的centOS老是连接不上,ifconfig eth0 命令显示 device not found.不知道是什么原因... 折腾了好久 网上是各种搜啊 终于找到解决方法了 ...