伪类和伪元素的区别

伪类和伪元素的区别

伪类有 :active、:focus 、:hover、:link、 :visited、:first-child 、:lang
伪元素有 :first-letter、:first-line、:before、:after

存在的意义：
伪类和伪元素存在的意义是为了能找到那些不能被常规CSS选择器获取到的信息和不存在于DOM树中的节点。

• 伪类：伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态。随后css2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”类。
• 伪元素：伪元素则代表了某个子元素，这个子元素虽然在逻辑上存在，但并不实际存在于文档树中。

伪类和类的区别：
类选择器是通过类名选择一组元素，而伪类是通过元素的某种状态而选择的一组元素，如a:hover可以控制所有有鼠标悬停状态的a标签，但我们并没有给这些a标签设置类名，所以称之为伪类。

伪类和伪元素的区别：

• 为了区分伪类和伪元素，在CSS3中作了形式上的区分，伪类前只有一个”:”号（:hover），而伪元素前有两个”:”号（::after）。当然，为了保证兼容，伪元素只有一个”:”也不会出错。
• 伪类是选择元素的某种状态，而伪元素是选择元素的某个子元素。
  
  • 伪类 p:first-child 的意义是选择p标签，而且此标签的“状态”是作为第一个子元素的。它不是选择p标签的第一个子元素。
  • 伪元素 p:first-line 的意义是选择p标签的文本首行这个子元素。文本首行虽然在逻辑上存在，但并不存在于DOM节点中。所以只能通过伪元素来选中。
• 伪类可同时使用多个，而伪元素一次只能使用一个。