伪类与伪元素

伪类：用于向某些选择器添加特殊的效果，当已用元素处于某种状态时，为其添加对应的样式

• :link 未访问的连接
• :visited 已访问的连接
• :hover 鼠标移动到容器，可用于页面的任何元素
• :active 被激活时的状态，不仅限于连接
• :focus 获得焦点时的状态，不仅限于连接
• :target
• :first-child…

伪元素：用于将特殊的效果添加到某些选择器，用于创建一些不存在文档树中的元素，为其添加样式

区别

• 根本区别：他们是否创造了新元素（抽象），伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果需要通过添加一个实际的元素才能达到

• css3写法上的区别：明确规定了伪类：，伪元素::

使用伪元素清除浮动

<div class="container clearfix">
    <div class="wrap">aaa</div>
</div>
.clearfix:after{
    content:"";				/*设置内容为空*/
    height:0;				/*高度为0*/
    line-height:0;			/*行高为0*/
    display:block;			/*将文本转为块级元素*/
    visibility:hidden;		/*将元素隐藏*/
    clear:both;				/*清除浮动*/
}
.clearfix{
    zoom:1;					/*为了兼容IE*/
}

注意

1. 伪元素默认是 inline
2. 空元素(不能包含内容的元素，例如input、img、textarea等)不支持 ::before，::after
3. 使用伪元素before,after必须设置content
4. 使用伪元素before,after显示背景图，一定要使用display设置为块元素
5. 使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle
6. 如果 content 的值是常量，必须用单引号或双引号括起来。如：content:‘abc’; , content:“abc”;。
7. 如果 content 的值是该元素的某个属性于常量组合而成的，常量仍然要用单引号或双引号括起来,之间不需要加号。如：content: ‘(‘attr(title)’)’;。
8. 伪元素 ::first-letter，::first-line 只对 display 为 block 和 inline-block 之类的块级元素有效。
9. 对内容的开头是符号，或者第一个是英文字母或数字，第二个是符号的，使用 ::first-letter 来设置样式时，会对第一个字母和符号都生效。

特殊字符	content 中这么写
空格	content:"\00a0";
<	content:"\003c";
>	content:"\003e";
&	content:"\0026";
"	content:"\0022";
©	content:"\00a9";
®	content:"\00ae";
×	content:"\00d7";