网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家分享关于css伪类和伪元素之间的对比分析，有兴趣的小伙伴可以看一看本文内容。
伪类
伪类是选择HTML文档的某些部分的方式，原则上不是基于HTML文档树本身及其元素，也不是基于名称，属性或内容等特征，而是基于其他抽象条件，如语言编码或动态状态一个元素。
原始伪类定义了随着时间的推移或通过用户干预进入和退出的元素的动态状态。CSS2在此概念上进行了扩展，以包括虚拟概念文档组件或文档树的推断部分，例如first-child。伪类的运作就好像将幻象类添加到各种元素中一样。
限制：与伪元素不同，伪类可以出现在选择器链中的任何位置。
示例伪类代码：
a:link /* 选择未访问过的“a”元素*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* 字体颜色为黑 */
background-color : #99FF99; /* 设置为淡绿色*/
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}
a:visited /* 这将选择任何已访问其目标的“a”元素。*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}
a:hover /* 这将选择处于悬停状态的任何“a”元素。这是指针在元素的渲染区域内移动期间的状态。用户指定元素但不激活它。 */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}
a:focus /* 这将选择当前具有焦点的任何“a”元素。焦点是元素接受键盘输入或其他形式的文本输入的状态。 */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}
a:active /*这将选择处于激活状态的任何“a”元素。活动是指针激活期间的状态（例如：按下并释放鼠标）在元素的渲染区域内*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}pseudo-elements用于处理元素的子部分。它们允许您在元素内容的一部分上设置样式，超出文档中指定的内容。换句话说，它们允许定义逻辑元素，这些元素实际上不在文档元素树中。逻辑元素允许在CSS选择器中处理隐含的语义结构。
限制：伪元素只能应用于外部和文档级上下文 - 而不是内嵌样式。伪元素受限于它们可以出现在规则中的位置。它们可能只出现在选择器链的末尾（在选择器的主题之后）。它们应该出现在选择器中找到的任何类或ID名称之后。每个选择器只能指定一个伪元素。要在单个元素结构上处理多个伪元素，必须创建多个样式选择器/声明语句。