偽類與偽元素都很常見钠至，我們經常使用偽類來實現(xiàn)執(zhí)行一些操作之后樣式的變化钟沛，比如：link矾柜，：active窄刘，：hover窥妇，：visited等偽類經常被添加到元素上來實現(xiàn)一個鏈接不同狀態(tài)下的不同效果。
本文思路：
偽類與偽元素是什么娩践？有何異同秩伞？對應的應用場景？
那么先說下偽選擇器吧欺矫。
首先，偽類與偽元素都屬于偽選擇器展氓；都是為了改變樣式而存在的穆趴。
一般來說，我們 都是通過JS控制DOM來改變樣式的遇汞，而偽選擇器則是另一種不用通過JS來改變樣式的方法未妹。
其次簿废，偽選擇器是為了修飾在文檔中不存在的一部分。
偽類與偽元素之所以存在络它，必然是為了彌補當下既有的普通類與普通選擇器的不足族檬，完成它們不能完成的工作，使得某些行為更具靈活性化戳。
所以单料，我們需要知道它們的工作原理，其次点楼，分析它們 之間的不同扫尖，再思考實際應用場景當中如何應用它們使工作得心應手。
什么是偽類掠廓？
偽類通常是添加一個實際的類换怖，并為它添加效果；
它可以通過選擇器找到那些不存在DOM樹中的信息蟀瞧，并且不能被常規(guī)CSS選擇器找到的信息沉颂。
一般之前會添加一個冒號表示這是一個偽類。
什么是偽元素悦污？
偽元素類似于添加一個實際的元素铸屉，完成普通選擇器不能完成的工作；
本身是基于元素的抽象塞关，并不存在于文檔結構中抬探。
一般之前會添加兩個冒號表示這是一個偽選擇器。
————————————————
常見的偽元素選擇器：
::first-letter 選擇元素文本的第一個字（母）帆赢。
? ::first-line 選擇元素文本的第一行小压。
? ::before 在元素內容的最前面添加新內容。
? ::after 在元素內容的最后面添加新內容椰于。
? ::selection匹配用戶被用戶選中或者處于高亮狀態(tài)的部分
? ::placeholder匹配占位符的文本怠益，只有元素設置了placeholder屬性時，該偽元素才能生效瘾婿。
如果網(wǎng)站只需要兼容 webkit蜻牢、firefox、opera 等瀏覽器偏陪，偽元素最好采用雙冒號的寫法抢呆，如果不得不兼容 IE 瀏覽器，還是用 CSS2 的單冒號寫法比較安全笛谦。
關于偽類的補充----偽類有以下幾種類型：
1.狀態(tài)偽類
用戶交互過程中元素狀態(tài)是動態(tài)變化的抱虐，并且會根據(jù)狀態(tài)呈現(xiàn)不同樣式。當元素處于某狀態(tài)時會呈現(xiàn)該樣式饥脑，而進入另一狀態(tài)后恳邀，該樣式也會失去懦冰。
常見的狀態(tài)偽類主要包括：
? ? ? :link 應用于未被訪問過的鏈接；? ?
? ? ? :hover 應用于鼠標懸停到的元素谣沸；
? ? ? :active 應用于被激活的元素刷钢；
? ? ? :visited 應用于被訪問過的鏈接，與:link互斥乳附。
? ? ? :focus 應用于擁有鍵盤輸入焦點的元素内地。
————————————————
2.結構化偽類
CSS3新增的選擇器，利用DOM樹進行元素過濾许溅，通過文檔結構的互相關系來匹配元素瓤鼻，可以減少Id與class屬性定義，使文檔結構更簡潔贤重。
常見的結構性偽類包括：
? ? ? :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 選擇的元素里面沒有任何內容涡贱。
? ? ? :checked匹配被選中的input元素，這個input元素包括radio和checkbox惹想。
? ? ? :default匹配默認選中的元素问词，例如：提交按鈕總是表單的默認按鈕。
? ? ? :disabled匹配禁用的表單元素嘀粱。
? ? ? :enabled匹配沒有設置disabled屬性的表單元素激挪。
? ? ? :valid匹配條件驗證正確的表單元素。
應用場景
一.偽類
1.清除浮動
2.元素垂直居中（基線）
3.給盒子添加陰影（rgba代替box-shadow锋叨，也可以避免repaint垄分，也是CSS性能優(yōu)化的方法之一）
做法：設置一個空的偽元素設置陰影透明度為0隱藏，再通過鼠標懸屯藁牵恢復它的透明度锋喜。
4.面包屑導航（用：before添加content，再添加/）
5.對話框的小箭頭
6.提示框
7.自動打字效果（光標）
8.文章水印
9.圖片遮罩
————————————————
二.偽元素
1.清除浮動
2.畫分割線
3.計數(shù)器
