一、偽類
1.1 定義
css偽類：css偽類用于向某些選擇器添加特殊效果。
偽類其實與普通的css類相類似，可以為已有的元素添加樣式，但是他只有處于dom無法描述的狀態下才能為文檔樹中的元素添加樣式，所以將其稱為偽類。(這種文檔樹無法描述的狀態是什么呢？當一個元素在用戶的不同行為下就變化成不同的狀態這個行為的變化dom就無法描述，就要產生偽類，來為一些選擇器添加特殊的效果)。
但是細分偽類的話，又分為動態偽類，UI元素狀態偽類，CSS3的:nth選擇器。
動態偽類
:link 未訪問的鏈接
:visited 已訪問的鏈接
:hover 鼠標移動到鏈接上
:active 選定的鏈接
:hover 用于當用戶把鼠標移動到元素上面時的效果；
:focus 用于元素成為焦點
對于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被
UI元素狀態偽類
:enabled type="text可寫狀態
:disabled type="text不可狀態
:checked type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀
IE6-8不支持":checked",":enabled",":disabled"這三種選擇器。
CSS3的:nth選擇器
:first-child 選擇某個元素的第一個子元素；
:last-child 選擇某個元素的最后一個子元素；
:nth-child() 選擇某個元素的一個或多個特定的子元素；
:nth-last-child() 選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算；
:nth-of-type() 選擇指定的元素；
:nth-last-of-type() 選擇指定的元素，從元素的最后一個開始計算；
:first-of-type 選擇一個上級元素下的第一個同類子元素；
:last-of-type 選擇一個上級元素的最后一個同類子元素；
:only-child 選擇的元素是它的父元素的唯一一個了元素；
:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty 選擇的元素里面沒有任何內容。
IE6-8和FF3-瀏覽器不支持":nth-child"選擇器。
1.2全部的css偽類
1.3 偽類的常見用法
1、a標簽的偽類
a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標移動到鏈接上 */
a:active /* 選定的鏈接 */
2、input獲取焦點 :focus
<input class="ccc" type="text" value="test" />
.ccc:focus{background-color:yellow;}
3、hover鼠標滑過
p:hover {color: #FF00FF}
一、偽元素
1.1 定義
偽元素：偽元素用于創建一些不在文檔樹中的元素，并且為他添加樣式，舉個例子：使用偽元素‘::before’可以在一個元素前邊增加一些文本，并且可以為這些文本添加一些樣式，雖然用戶可以看到這寫文本，但是這些文本是不存在于文檔樹中的。
1.2 幾種常見偽元素
1）:frist-letter用于向文本中的第一個字母添加樣式
2）:first-line向文本的首行添加樣式
3）:before在元素之前添加內容
4）:after在元素之后添加內容
5）::selection：匹配選中部分的內容?？捎玫腃SS屬性為background,color。
1.3 偽元素和偽類的對比
（1）偽類和偽元素的最大區別就在于有沒有創建一個文檔樹以外的元素。偽元素創建了一個文檔樹以外的元素（虛擬容器）并為他添加樣式，這個容器不包含任何DOM元素但是可以包含內容。換句話說偽類和偽元素的區別就是偽類的操作對象是文檔樹中已有的元素，而偽元素則創建了一個文檔樹以外的元素。
（2）偽類使用的是單冒號，但是在css3中規定偽元素使用的雙冒號，但是除了少部分的偽元素必須使用雙冒號以外，像after還有before都是支持單引號的。為了兼容性所以目前還是在使用一些常見的偽元素的時候采用單冒號較為穩妥
1.4 偽元素的content屬性
偽元素的content屬性，不僅僅可以簡單直接的設置一個字符串作為偽元素的內容，它還具備一定限度的編程能力，如下
div::after{
content: "普通字符串";
content: attr(父元素的html屬性名稱);
content: url(圖片、音頻、視頻等資源的url);
/* 使用unicode字符集，采用4位16進制編碼
* 但不同的瀏覽器顯示存在差異，而且移動端識別度更差
*/
content: "\21e0";
/* content的多個值可以任意組合，各部分通過空格分隔 */
content: "'" attr(title) "'";
/* 自增計數器，用于插入數字/字母/羅馬數字編號
* counter-reset: [<identifier> <integer>?]+，必選，用于標識自增計數器的作用范圍，<identifier>為自定義名稱，<integer>為起始編號默認為0。
* counter-increment: [<identifier> <integer>?]+，用于標識計數器與實際關聯的范圍，<identifier>為counter-reset中的自定義名稱，<integer>為步長默認為1。
* <list-style-type>: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
*/
content: counter(<identifier>, <list-style-type>);
/* 以父附屬元素的qutoes值作為content的值
*/
content: open-quote | close-quote | no-open-quote | no-close-quote;
}
/* Content接受6種類型，和一種組合方式 */
1.4 常見的偽元素的用法
1、清除浮動
.clear:after{
display:block;
content:"";
height:0;
clear: both;
overflow:hidden;
visibility:hidden;
}
2、切割線
<style>
* {
padding: 0;
margin: 0;
}
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
<p class="spliter">分割線</p>
3、對話框小箭頭
<style>
.arrow-right{
margin: 500px auto;
width:300px;
height:80px;
background-color: pink;
padding-left: 20px;
}
.arrow-right:before{
background-color: pink;
content: "";
display: block;
width: 0;
height: 0;
border-top: 10px solid #fff;
border-bottom: 10px solid #fff;
border-left: 20px solid pink;
position: relative;
top:14px;
left: 300px;
}
</style>
<p class="arrow-right">一起開黑吧？</p>
4、水印
<style>
.article{
position: relative;
padding-bottom: 30px;
}
.article:after{
position: absolute;
content:'范小飯';
display:block;
width: inherit;
font-size:16px;
text-align: center;
color:rgba(247, 47, 47, 0.5);
opacity: 0.5;
bottom: 0;
right: 0;
}
</style>
<p class="article">Hi,一起吃飯吧？</p>
