伪类和伪元素有哪些（浅析什么是伪类和伪元素？伪类和伪元素的区别解析）

一             、理解什么是伪类？什么是伪元素？

1 
  
 
  
 
  
 
  
 
  
 
  
 
 、伪类种类

　　伪类作用对象是整个元素

a:link{color:#111} a:hover{color:#222} div:first-child{color:#333} div:nth-child（3）{color:#444}

　　尽管这些条件不是基于DOM的             ，但结果每一个都是作用于一个完整的元素 
  
 
  
 
  
 
  
 
  
 
  
 
 ，比如整个链接













，段落 
  
  
  
  
  
  ，div等等 
  
  
  
  
  
  
。

2













、伪元素种类

　　伪元素作用于元素的一部分：一个段落的第一行或者第一个字母

p::first-line{color:#555} p::first-letter{color:#666} a::before{content : "hello world";}

3 
  
  
  
  
  
  、总结：

　　伪元素其实相当于伪造了一个元素 
  
  
  
  
  
  
 ，例如 before

 


 


 


 


 


 


，first-letter 达到的效果就是伪造了一个元素 
 
 
 
 
 
 ，然后添加了其相应的效果而已；

　　而伪类没有伪造元素 
   
   
   
   
   
   
 ，例如 first-child 只是给子元素添加样式而已
  
  
  
  
  
  
 。

　　伪元素和伪类之所以这么容易混淆
 

 

 

 

 

 

，是因为他们的效果类似而且写法相仿
 

 

 

 

 

 

 ，但实际上 css3 为了区分两者             ，已经明确规定了伪类用一个冒号来表示 

 
 

 
 

 
 

 
 

 
 

 
 

，而伪元素则用两个冒号来表示
 


 


 


 


 


 


 。

　　但因为兼容性的问题












，所以现在大部分还是统一的单冒号                    ，但是抛开兼容性的问题 
 
 
 
 
 
 
 
 
 
 
 
 
，我们在书写时应该尽可能养成好习惯



















，区分两者 
 
 
 
 
 
 
。

二 
  
  
  
  
  
  
 、伪类与伪元素的特性及其区别

1

 


 


 


 


 


 


、伪类本质上是为了弥补常规CSS选择器的不足             ，以便获取到更多信息

2 
 
 
 
 
 
 、伪元素本质上是创建了一个有内容的虚拟容器

3 
   
   
   
   
   
   
 、CSS3中伪类和伪元素的语法不同

　　伪类  :link  :hover              单冒号

　　伪元素  ::before    ::after   双冒号

4
 

 

 

 

 

 

、可以同时使用多个伪类 
  
 
  
 
  
 
  
 
  
 
  
 
 ，而只能同时使用一个伪元素

5
 

 

 

 

 

 

 、其中伪类和伪元素的根本区别在于：它们是否创造了新的元素













，这个新创造的元素就叫  "伪无素"

6             、伪元素/伪对象：不存在在DOM文档中 
  
  
  
  
  
  ，是虚拟的元素 
  
  
  
  
  
  
 ，是创建新元素
   
   
   
   
   
   
 。

　　 这个新元素（伪元素）是某个元素的子元素

 


 


 


 


 


 


，这个子元素虽然在逻辑上存在 
 
 
 
 
 
 ，但却并不实际存在于文档树中

7 

 
 

 
 

 
 

 
 

 
 

 
 

、伪类：存在dom文档中标签 
   
   
   
   
   
   
 ，在伪类时改变样式

8












、因为伪类是类似于添加类所以可以是多个
 

 

 

 

 

 

，而伪元素在一个选择器中只能出现一次
 

 

 

 

 

 

 ，并且只能出现在末尾