理解css伪类和伪元素

伪类就是可以通过直接添加一个类样式达到同等效果，而伪元素，则需要先添加一个元素，然后在元素上添加样式才能达到同等效果

伪类

:active 向被激活的元素添加样式。

:focus 向拥有键盘输入焦点的元素添加样式。

:hover 当鼠标悬浮在元素上方时，向元素添加样式。

:link 向未被访问的链接添加样式。

:visited 向已被访问的链接添加样式。

:first-child 向元素的第一个子元素添加样式。

:lang 向带有指定 lang 属性的元素添加样式。

伪元素

:first-letter 向文本的第一个字母添加特殊样式。

:first-line 向文本的首行添加特殊样式。

:before 在元素之前添加内容。

:after 在元素之后添加内容。

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes

::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

一些常用的css伪元素和伪类的用法

通过css3伪类选择器： :nth-child() 可以选择表格或li等有规律元素的偶数行。

odd表示奇数行，even表示偶数行;

tr:nth-child(odd) {background-color: #333;}

tr:nth-child(even) {background-color: #f9f9f9;}

使用first-child和last-child伪类设置最后和第一个元素：

table tr:first-child {background: #eee}

table tr: last-child{background: #eee}

伪元素:before和:after用法

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。

:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

//html
<p>ello Worl</p>
//css
 p:before{
        content: "H"  /*:before和:after必带技能，重要性为满5颗星*/
    }
    p:after{
        content: "d"  /*:before和:after必带技能，重要性为满5颗星*/
    }

结果输出“Hello World”

参考

https://segmentfault.com/a/1190000000484493