css 伪类 伪元素

伪类：用于向某些选择器添加特殊的效果。

伪元素：用于向某些选择器设置特殊效果

伪类其实弥补了css选择器的不足，用来方便的获取信息

而伪元素本质上是创建了一个虚拟容器，我们可以在其中添加内容或样式

伪类的主要用法：

 a:link{
	color:green;
  }
 a:visited{
	color:red;
 }
 a:hover{
	color:black;
}
 a:active{
	color:#ccc;
}
li:first-child{
	background: red;
}
li:last-child{
	background: green;
}
li:nth-of-type(2n){
	background: yellow;
}
li:nth-of-type(2n-1){
	background: pink;
}
p:first-of-type{//在这里用：first-child没用，因为p不是父元素的第一个子元素
	color:#ccc;
}
p:last-of-type{
	color:red;
}

伪元素：

：before 在被选元素之前插入内容，需要指定content属性来插入内容，例如

ul:before{
			content:"";
			display: block;
			width: 0;
			height: 0;
			border:20px solid transparent;
			border-bottom-color:black; 
			position: absolute;
			left:50px;
	}

：after 在被选元素之后插入内容，需要指定content属性来插入内容。

：first-letter    匹配元素中文本的首字母。

li:first-letter{
		font-size: 30px;
}

：first-line   匹配元素中第一行的文本（只能在块级元素中使用）

li:first-line{
		color:#ccc;
}

：before和：after伪元素需要设置content属性，否则伪元素是无用的

：before和：after伪元素在页面生成的元素默认是内联元素，如果想要定义宽高，需要设置它的display 为block，或者设置浮动。它和普通元素一样，可以设置宽高背景边框位置