伪类与伪元素.md

伪类和伪元素

定义

• 伪类：用于向某些选择器添加特殊的效果
• 伪元素：用于将特殊的效果添加到某些选择器

伪类

• 伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
• 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
• 任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

• 伪类就像真正的类一样，可以叠加使用
  没有数量上限，只要不是互斥的
  比如这样

  em:first-child:hover {
      color: red;
  }

这是完全可以的。但注意，这里是“与”的关系 ，也就是说既要满足“first-child”第一个子元素 ，又要满足“hover”光标悬浮

伪元素

• 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。
• 伪元素的由两个冒号::开头，然后是伪元素的名称。
• 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

p::first-letter:hover {  /*错误的写法：伪元素不是末尾*/
    color: red;
}

• 简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。
  以::first-line为例，它获取了指定元素的第一行内容并且将第一行的内容加入到虚拟容器中。

区别

1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2. 伪元素本质上是创建了一个有内容的虚拟容器；
3. CSS3中伪类和伪元素的语法不同；
4. 可以同时使用多个伪类，而只能同时使用一个伪元素；

• 在计算权重的时候，伪类与类优先级相同 ，伪元素与标签优先级相同