谈谈css中的伪类和伪元素,谈谈css中的伪类和伪元素

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

css选择器

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

css伪类

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

css伪元素

伪元素用于创立少量不在文档树中的元素，并为其增加样式。比方说，我们可以通过:before来在一个元素前添加少量文本，并为这些文本增加样式。尽管客户可以看到这些文本，但是这些文本实际上不在文档树中。

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

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

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

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

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

谈谈css中的伪类和伪元素,谈谈css中的伪类和伪元素相关推荐

【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
WEB安全之DIV CSS基础（二）：文字和文本的属性、列表样式和伪类超链接
WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性文字属性文本属性列表样式和伪类超链接项目符号列举设置列表项标记超链接文字和文本的属性文字 ...
CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
css在中元素添加元素,css - 在伪元素内容中添加换行符到:: after或:: before
css - 在伪元素内容中添加换行符到:: after或:: before 我无法访问页面的HTML或PHP,只能通过CSS进行编辑. 我一直在网站上进行修改并通过content或::before伪元 ...
复合选择器-链接伪类选择器（HTML、CSS）
复合选择器-链接伪类选择器(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
css伪元素覆盖,CSS :befor :after 伪元素的巧妙用法
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
【CSS 教程系列第 7 篇】什么是 CSS 中的 class 选择器（类选择器）、多类名选择器
这是[CSS 教程系列第 7 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器.伪 ...
IS-IS 的 DIS （伪节点）及 DIS 和 OSPF中DR 的区别
DIS 及 DIS 和 DR 的区别 1.DIS 与伪节点: ①.DIS 是指指定中间系统(Designated IS) ②.伪节点是指在广播网络中由DIS创建的虚拟路由器 2.DIS 特点: 在广播 ...

谈谈css中的伪类和伪元素,谈谈css中的伪类和伪元素

谈谈css中的伪类和伪元素,谈谈css中的伪类和伪元素相关推荐

最新文章

热门文章