僞類與僞元素

僞類：用於向某些選擇器添加特殊的效果，當已用元素處於某種狀態時，爲其添加對應的樣式

• :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";