Pseudo-element
Pseudo common elements: before (before adding content element), after (after adding content element);
Pseudo-element is not used: First-Letter (add special style to the first letter of the text), first-line (the first line to add special style text);
Usage scenarios: the additional effect of the activities of the class name. This activity class pseudo-class names may be brought, it may be js dynamic switching className ;
Usage: double colon immediately after the selectors, with no spaces, such as .author :: before
This is a classic use of pseudo-element, this pseudo-element binding on a class activity, and this activity class here is caused by pseudo-class hover, and there are three points to note: around colon with no spaces; content that will be written property; required to make the writing to block any display width and height, as the dummy elements are not bound by the DOM . The final results are as follows:
We also measure what effect a pseudo-elements bind multiple choice:
For .test :: hover class selector is concerned, a full three pseudo-element binding, see how it works?
It can be seen that there is no pressure, a selector may be added or a plurality of pseudo-element pseudo-class . If both added before and after and are absolute positioning, then the default after the z-index is higher than before.
2. The pseudo-class
Common pseudo-classes: hover (when the mouse is suspended), active (mouse clicks);
Unusual pseudo-classes: Link (Link unvisited), visited (visited links);
使用场景：鼠标悬浮或点击时的效果；
用法：单冒号紧接在选择器后面，没有空格，如.author:hover
在上述代码中，我们预期的效果：悬浮变黑，点击变红。获得的效果如下：
如果我们把两个伪类的顺序调换一下呢？看看会发生什么：
可以看到，悬浮上去仍然会变黑，但是点击不变红，换句话说：伪类顺序的改变引起了效果的紊乱。
总结
1.伪类与伪元素的根本区别在于它们是否创造了新的元素，伪元素创造了新的非DOM元素，而伪类只是在已有的元素上添加类别而已。
2.伪元素并不的好处是不需要为了一些视觉效果在HTML中添加多余的DOM，需要注意的是伪元素只为视觉效果而生，它不能也不应该涉及任何逻辑。
3.当为一个选择器添加多个伪类的时候，顺序不能变（link --> visited --> hover --> active）,尤其是常用的伪类中，hover一定要写在active前面。