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. stdafx.h、stdafx.cpp的作用

    这两个文件用于建立一个预编译的头文件".PCH"和一个预定义的类型文件"STDAFX.OBJ".由于MFC体系结构非常大,各个源文件中都包含许多头文件,如果每次 ...

  2. JSP页面中格式化日期为指顶格式

    有时候在页面中显示直接从数据库获取的日期时候会出现英文的日期格式.比如:

  3. (12)Linux shell之read 用法

    Linux shell之read 用法 #!/bin/bash#read 用来读取屏幕输入或是读取文件内容.read -p  "please input you  name: " ...

  4. 3.资源调度框架yarn

    既然要分析yarn,无非是从以下方面分析 (一).yarn产生背景(二).yarn概述(三).yarn架构(四).yarn执行流程(五).yarn环境搭建(六).提交作业到yarn上运行 (一).ya ...

  5. BAT 前端开发面经 —— 吐血总结

    更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘,在此总结一下 一是备忘.总结提升,二是希望给大家一些参考 其他面试及基础相关可以参考其他博文: ...

  6. 【C++】this指针

    来自:黄邦勇帅 this 指针是所有成员函数的隐含指针,每次调用成员函数时,this 指针就指向调用此函数的对象.可以在成员函数类 部使用显使用this 指针. 友元函数不是类的成员函数,所以友元函数 ...

  7. 在Ubuntu 16.04安装 Let’s Encrypt并配置ssl

    1.安装前准备 1)要确保python的默认版本为2.7及以上版本. 2)需要配置的apache.nginx需要提前配置绑定域名. 2.安装ssl 在这个https://certbot.eff.org ...

  8. (十二)MySQL逻辑备份mysqldump

    (1)简介 语法 mysqldump -h服务器 -u用户名 -p密码 [-P端口号] [参数] 数据库名 >备份文件.sql 关于数据库: -A,--all-databases 所有库,会生成 ...

  9. Python的异步编程[0] -> 协程[1] -> 使用协程建立自己的异步非阻塞模型

    使用协程建立自己的异步非阻塞模型 接下来例子中,将使用纯粹的Python编码搭建一个异步模型,相当于自己构建的一个asyncio模块,这也许能对asyncio模块底层实现的理解有更大的帮助.主要参考为 ...

  10. Python与数据结构[3] -> 树/Tree[1] -> 表达式树和查找树的 Python 实现

    表达式树和查找树的 Python 实现 目录 二叉表达式树 二叉查找树 1 二叉表达式树 表达式树是二叉树的一种应用,其树叶是常数或变量,而节点为操作符,构建表达式树的过程与后缀表达式的计算类似,只不 ...