为什么会有伪类 伪元素

CSS2

5.10 Pseudo-elements and pseudo-classes（伪元素和伪类）

在CSS2.1中，根据元素在DOM中的位置可以为其设置样式。大部分情况这种模式是有效的，但是有些情况就无法实现。例如，HTML4中，没有指向段落第一行的元素，也就没有相应的CSS选择器使用。

CSS引入伪元素和伪类的概念允许格式化文档树以外的信息。

伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用::before 或 ::after。

伪类通过特征归类元素，而不是其名字、属性、或内容。原则上来说，不能从文档树中推断这些特征。伪类可以是动态的，从这个方面来说，当用户与文档交互时，一个元素可以获得或丢失伪类。‘:first-child’和‘:lang()’是例外，‘:first-child’，它可以从文档树中推断出来，‘:lang()’在某些情况下也可以从文档树中推断出来。

伪元素和伪类都不能出现在文档源或文档树中。

伪类可以用在选择器的任何地方，而伪元素只能附加在最后一个简单选择器之后。

伪元素和伪类名称不区分大小写。

有的伪类是互斥的，有的伪类可以同时应用于同一个元素。如果规则冲突，层叠性决定结果。

Pseudo-classes

 :first-child 伪类：与元素的第一个子元素匹配。

div > p:first-child { text-indent: 0 }        

：元素匹配的是div元素下的的第一个为P的子元素。样式是将DIV元素下的第一个p元素内容缩进设为0.

<P> The last P before the note.

<DIV class="note">

<P> The first P inside the note.

</DIV>

：匹配的是DIV元素里面的p元素

<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

：上面的例子，元素不会匹配到DIV下的P

p:first-child em { font-weight : bold }

上面的句子 将P元素的第一个子元素内的字体设置为粗体。

匿名容器不是DOM树的元素，他们不能算作第一个子元素。

：link   :visited 链接伪类

 

User agents commonly display unvisited links differently from previously visited ones. CSS provides the pseudo-classes ':link' and ':visited' to distinguish them:

• The :link pseudo-class applies for links that have not yet been visited.
• The :visited pseudo-class applies once the link has been visited by the user.

UAs may return a visited link to the (unvisited) ':link' state at some point.

The two states are mutually exclusive.