区分伪类和伪元素

深藏阁楼爱情的钟 2022-05-26 02:39 279阅读 0赞

**一：伪类：**  
 1:定义：css伪类用于向某些选择器添加特殊效果。  
伪类其实与普通的css类相类似，可以为已有的元素添加样式，但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式，所以将其称为伪类。(这种文档树无法描述的状态是什么呢？当一个元素在用户的不同行为下就变化成不同的状态这个行为的变化dom就无法描述，就要产生伪类，来为一些选择器添加特殊的效果)。  
 2:什么是文档树（DOM）？：  
DOM实际上是以面向对象的方式描述的文档模型，DOM定义了表示修改文档所需的对象，这些对象的行为和属性，以及这些对象之间的关系，所以可以吧DOM人文是页面上数据和结构的一个树形表示。  
 3:伪类选择器有哪些:  
1）:link向未被访问的链接添加样式（链接，看来是只用于<a>）  
2）:visited向已被访问过的链接添加样式（链接，看来还是只用于<a>）  
3）:hover当鼠标悬浮在元素上方时，向元素添加样式（没有特意指定必须是链接，所以这个标签被大量用于定义任何一个块/行元素在鼠标经过时的样式）  
4）:active向被激活的元素添加样式（当鼠标点击时的样式，要注意是点击时的样式的变化，这个也不是只有超链接才能用的伪类选择器）  
5）:focus向拥有键盘输入焦点的元素添加样式（如input输入框鼠标点击时产生背景颜色的变化，注意是键盘输入焦点。注意有些浏览器不支持此功能样式）  
6）:first-child 用于匹配父元素中的第一个元素。例如E:first-child,找的是E元素，E元素必须是他的父元素的第一位元素（扩展【：nth-child(n)】用于匹配父元素的第n个子元素E，这个父元素必须是元素E的父元素。）。  
7）:lang向带有指定lang属性的元素添加样式（在标签中设置lang的属性，在样式表中对这种确切lang属性值的元素进行样式的设定，即使你有能力为不同的语言定义特殊的规则）  
 4:注意：  
伪类选择器 ”：link”和“：visited“”只能用于定于链接的未被访问的样式和已被访问过的样式。  
伪类选择器 “：hover“和”:active”可以用于定义任何一个块或行元素在鼠标经过时点击时的样式。  
 5:重点：上述四个伪类选择器的顺序必须是固定的，否则将不会产生期望中的变化。有一个好记的窍门：love hate（爱恨）。  
**二：伪元素：**  
  
 1:伪元素用于创建一些不在文档树中的元素，并且为他添加样式，举个例子：使用伪元素”：：before”可以在一个元素前边增加一些文本，并且可以为这些文本添加一些样式，虽然用户可以看到这写文本，但是这些文本是不存在于文档树中的。  
 2:几种常见的伪元素：  
1）:frist-letter用于向文本中的第一个字母添加样式  
2）:first-line向文本的首行添加样式  
3）:before在元素之前添加内容  
4）:after在元素之后添加内容  
 3:伪元素和伪类的区别：  
（1）伪类和伪元素的最大区别就在于有没有创建一个文档树以外的元素。伪元素创建了一个文档树以外的元素（虚拟容器）并为他添加样式，这个容器不包含任何DOM元素但是可以包含内容。换句话说伪类和伪元素的区别就是伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。  
（2）伪类使用的是单冒号，但是在css3中规定伪元素使用的双冒号，但是除了少部分的伪元素必须使用双冒号以外，像after还有before都是支持单引号的。为了兼容性所以目前还是在使用一些常见的伪元素的时候采用单冒号较为稳妥。  
  
  
本文学习并总结概括了此篇博客，感谢大神们：  
https://kb.cnblogs.com/page/545911/