css 伪类

理解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}

li:nth-child(3) 
 	background-color: yellow;
}

{ /找出相同一级中的li元素，然后再找出它们指定下标的那个元素,给它设置样式 ， （例子：如上），注意：下标从1开始的/

p:nth-child(3n+4) {  
	background-color:red
}

/我们用:nth-child(even) 或者:nth-child(odd) 可以找出奇偶元素，但是假如我想每隔3个元素就变色呢？/
/3n表示每隔3个元素，4表示从第四个元素开始，每隔三个元素就将他们的颜色设为红色/

伪元素: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颗星*/
}