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. ...
随机推荐
- Linux rar乱码
大家都知道,Linux下的中文乱码是一个很烦的事情,在这里我叫大家如何解决这个问题. rar乱码 ubunut下打开rar包,如果里面有中文就会显示乱码,其实就觉这个问题最简单了,只要把进入新立得,搜 ...
- Linux 的源码安装工具 CheckInstall
Linux 的源码安装工具 CheckInstall Checkinstall 是一个能从 tar.gz 类的 https://www.ibm.com/developerworks/cn/linux/ ...
- [转载]基于Redis的Bloomfilter去重(附Python代码)
前言: “去重”是日常工作中会经常用到的一项技能,在爬虫领域更是常用,并且规模一般都比较大.去重需要考虑两个点:去重的数据量.去重速度.为了保持较快的去重速度,一般选择在内存中进行去重. 数据量不大时 ...
- windows下nginx安装及使用
nginx简介: nginx是一款轻量级web服务器,也是一款反向代理服务器(比如域名转发等). nginx功能: 1.可直接支持Rails和PHP的程序. 2.可作为HTTP反向代理服务器. 3.作 ...
- DRF最高封装的子类视图
# 转载请留言联系 子类视图: 视图 作用 方法 父类 ListAPIView 查询多条数据 get GenericAPIView ListModelMixin CreateAPIView 新增一条数 ...
- hdu 1423(LCS+LIS)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1423 好坑啊..还有公共串为0时的特殊判断,还有格式错误..看Discuss看知道除了最后一组测试数据 ...
- 如何在qt中使用中文输入法
参考: http://blog.csdn.net/u013812682/article/details/52101088 dpkg -L fcitx-frontend-qt5 到qt安装目录里find ...
- linux下重置mysql密码
测试环境:centos5.X+mysql5.x 网上查了好多没成功,以下是我学到的的重置方法 在/etc/my.cnf中的mysqld配置部分加入一行: skip-grant-tables重启mysq ...
- std::string 字符串大小写转换(转)
该问题归结为std::transform函数的使用 函数原型 template < class InputIterator, class OutputIterator, class UnaryO ...
- (1) Flutter android studio安装
Flutter由两部分组成 Flutter引擎和Flutter框架 Flutter引擎由C++编写,在android上通过NDK编译,在ios上通过llvm编译 Flutter框架由dart编写 1. ...