CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素加入样式,class是定义在HTML文档树中的。

可是这在一些情况下是不够用的,比方用户的交互动作(悬停、激活等)会导致元素状态发生变化。class对这些动态变化无能为力。

为此,CSS引入了伪类(pseudo-class)的概念用来支持依据文档树以外的信息来过滤元素的能力。

伪类是一个抽象类,本质上还是一个类,因此其主要作用仍然是用来选择元素而后设定详细的样式。

伪类的定义使用:单冒号加上名称,如 mydiv:hover。

伪类的选择对象可能会随着用户操作文档而发生变化,比方当用户删除某些节点后,会影响子元素(nth-child)伪类的选择。

伪类选择元素的依据不是名称、属性或内容。而是依据特征(比方状态或顺序)。(:lang除外)

伪元素(pseudo-element)是另外一个概念。其设计意图和伪类一样,是为了能支持依据文档树以外的信息来进行格式化。

伪元素本质上是一个元素。仅仅是它一般须要依附在一个已有元素上,作为这个元素的“部分”或“补充”。比方::first-line或::after。

CSS2.1规范中引入的新的伪元素语法是双冒号::。但为了和历史版本号兼容,一些之前引入的伪元素仍然能够使用单冒号语法。

和伪类用来过滤元素不同,伪元素用来过滤内容或创建补充内容。在这些内容外包装一个虚拟的容器。然后应用特定的样式。

我们能够在伪元素上应用伪类。

这里有一个在线实例。能够非常直观的理解两者的使用方式:http://wow.techbrood.com/fiddle/15719

要了解很多其它伪类、伪元素的用途、实例和差别。

请參考阅读在线教程:

p=css-pseudo-elements">http://techbrood.com/Guide/h5b2a?p=css-pseudo-elements

by iefreer

最新文章

  1. Linux 进程间通讯详解七
  2. Angular中使用Rainbow
  3. Android项目:proguard混淆第三方jar.
  4. mac开启服务命令
  5. [团队项目] Scrum 项目 2.0 产品BACKLOG
  6. ASP.Net Chart Control -----Bar and Column Charts
  7. C++ Prime:指针和const
  8. WPF笔记(2.9和2.10)——Layout
  9. 使用Java管理Azure(1):基础配置
  10. java实现从实体到SQL语句的转换(二)
  11. codeforces 598D Igor In the Museum
  12. React-Native基础教程
  13. Vim 命令 【转】
  14. Excel教程(14) - 文本和数据函数
  15. Adobe Fireworks CS6 Mac破解版
  16. 定期清空log文件
  17. Jmeter-WINDOWS下的配置部署
  18. 微信小程序web-view实例
  19. centos安装多个tomcat
  20. [android] 手机卫士保存安全号码

热门文章

  1. Android ListView动画实现方法
  2. 怎样选择正确的HTTP状态码
  3. less12 函数
  4. [学习笔记]AJAX学习
  5. 使用Onedrive
  6. 织梦CMS调用文章第一张图片(非缩略图)终极方法
  7. UVa 729 The Hamming Distance Problem【枚举排列】
  8. 学习Go语言之模板方法模式
  9. Dynamic Rankings(分块)
  10. Maven学习总结(21)——Maven常用的几个核心概念