css的伪类和伪元素

因为最近在准备面试，补一下基础的知识，在看css3新增的属性的时候无疑看见了伪类和伪元素，之前一直不太明确他们到底什么今天补习了一下知识，把自己了解到的分享出来，顺便完成自己人生的第一篇博客 hhh；

伪类

css3中对 伪类的定义：The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

上面的意思大概为：伪类存在的意义是为了找那些不存在dom树中的信息以及不能被常规的css选择器找到的信息

就我认为伪类就是获取页面中不存在得信息：找不到的dom树以外的信息如：hover， a标签的：link  ，这些信息不存在于dom树中这时就要用到伪类； 

em:hover { color: red;}

不能被常规的css选择器找到的信息， 获取父元素的第一个子元素常规的选择器并不能完成，而：first-child此时便可以找到

em：first-child { color: red;}

一个元素可以同时设置多个伪类

还有很多的伪类选择器就不一 一列出了，如果有感兴趣的同学可以去https://blog.csdn.net/sujin_/article/details/83374093这里看一看；

伪元素

就我认为伪元素就是创建了一个虚拟的容器，只不过里面装的是内容，可以为其设置样式，完成一些想要的效果，比如：用：after给父元素清除浮动，画分割线等等；

em::after {
    content: '';
    display:block;
    clear:both;
}

伪元素还可以减少了节点，让代码看起来更简洁 ；

 

最后总结一下伪类和伪元素的特征：

1.伪类可以找到普通的css选择器找不到的元素；

2.伪元素就是虚拟内容的容器；

3.css3中的：xxxx代表伪类  ：：xxxx代表伪元素；

4.一个元素可以有多个伪类，但是只能有一个伪元素；

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