当前位置: IT培训 > HTML5培训 > 前端开发 > CSS > 谈谈css中的伪类和伪元素
谈谈css中的伪类和伪元素 时间:2017-07-31     来源:CSS开发教程汇总

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法。

css选择器

css选择除了我们常见的也是使用频率高的class选择器,id选择器,属性选择器,派生选择器等之外,还有重要的一类,是根据元素的状态或者元素中特别的内容来选从HTML文档的DOM树中获取元素,就两种就是伪类和伪元素,他们使用“:”或者“::”来选择。

css伪类

伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说,元素的特征是不可以从DOM树上推断得到的,而且其是动态的,当用户和DOM进行交互的时候,元素可以获得或者失去一个伪类。

CSS开发教程

css伪元素

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

CSS开发教程

css伪元素两者之间的区别和联系

伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。

单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用是一样的。

所以,如果你的网站只需要兼容 webkit、firefox、opera 等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容 IE 浏览器,还是用 CSS2 的单冒号写法比较安全。

下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图:

CSS开发教程

CSS开发教程

X