偽類經常與偽元素混淆，偽元素的效果類似於通過新增乙個實際的元素才能達到，而偽類的效果類似於通過新增乙個實際的類來達到。實際上css3為了區分兩者，已經明確規定了偽類用乙個冒號來表示，而偽元素則用兩個冒號來表示。偽類與偽元素的本質區別就是是否抽象創造了新元素。具體的偽類和偽元素相關知識本文就不深入，下面介紹一下從青銅到王者10個css3偽類使用技巧和運用。直擊案例**
眾所周知，animate/transition box-shadow 可以使用box-shadow屬性來實現盒子陰影效果，但repaint消耗較多，於是這裡提出通過修改偽元素的透明度來實現盒子陰影
實現原理：
通過改變透明度，這樣從乙個非預設值更新它的值，就不需要承擔任何重繪（參見：
(ps:貌似莫名的解鎖了乙個關於前端css優化，壞笑壞笑)
這裡設定乙個空的偽元素設定陰影透明度為0隱藏，再通過滑鼠懸停恢復它的透明度，下面是傳統和偽類實現的**對比
animate/transition box-shadow 可以使用box-shadow屬性來實現盒子陰影效果，但重繪消耗較多
通過修改偽元素的透明度來實現同樣的效果,沒有重繪消耗
複製**
.before
.before:hover
.after
.after:before
.after:hover:before
複製**
複製**ul.breadcrumb
ul.breadcrumb li
ul.breadcrumb li+li:before
ul.breadcrumb li a
複製**
實現原理：三邊設定邊框，箭頭指向的那個方向的border不用設定，位於箭頭兩邊的邊框顏色為透明（transparent），對邊為主體邊框顏色（較大的）/主體背景顏色（較小的），因為我們要有邊框顏色的三角箭頭，當第乙個箭頭（較大的）被第二個箭頭（較小的）通過準確覆蓋之後剩下沒被覆蓋的邊緣就是合成三角箭頭的邊框了，其顏色就是較大的那個三角箭頭的顏色，可調。而較小的那個三角箭頭的顏色要設定成主體顏色，進行負值定位偏移時要把主體邊框蓋住，從而與主體合在一起了
複製**
.arrow-left:before
複製**
.edge--bottom
.edge--bottom:after
.edge--bottom:after
複製**
tooltip top
lorem ipsum dolor sit amet
複製**
.tooltip .tooltip-content::after
.tooltip.top .tooltip-content
.tooltip.top .tooltip-content::after
複製**
webdesign
複製**
.tagline-skill_inner:after
複製**
h1
h1:before
複製**
a
a::before
a::after
複製**
2、google的ie9.js是解決ie5.5到ie8 css3特性相容性問題的js庫
css的世界很美好，每個知識點都可以值得深入研究和實踐，對於偽類、偽元素也有很多土味特效可以寫出來，比如說遮罩、背景模糊，更多高階的滑鼠經過事件特效等等，上邊的10個案例是我個人工作上總結和參考踏得網上資源整理，希望對大家有所幫助
如何使用 CSS3 偽類
在 這些新的 css3 偽類之前，先簡要回顧追溯一下這些在 web 應用中常常被誤解的 css 選擇器。在 1996 年，當 css1 的規範完成後，一些偽類選擇器已被囊括在內，其中許多你幾乎每天都在使用。例如 這些狀態都可以被應用到某個元素，通常是以 a 偽類名 css2 來了和 lang 新偽類...
CSS3 新增偽類
p first of type 父元素中第乙個p子元素 p lastt of type 父元素中最後乙個p子元素 p only of type 父元素中唯一乙個p子元素 p nth of type n 父元素中第n個p型別的p元素 p nth last of type n 父元素中倒數第n個p型別的...
CSS3 新增偽類
p first of type 選擇屬於其父元素的首個 元素的每個 元素。p last of type 選擇屬於其父元素的最後 元素的每個 元素。p only of type 選擇屬於其父元素唯一的 元素的每個 元素。p only child 選擇屬於其父元素的唯一子元素的每個 元素。p nth c...