文檔閱讀：
總結(jié)偽類與偽元素 | AlloyTeamwww.alloyteam.com!
前文回顧：
一笤闯、偽類：
1堕阔、定義
偽類用于當(dāng)已有元素處于的某個狀態(tài)時，為其添加對應(yīng)的樣式颗味，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化
2超陆、類型
3、應(yīng)用場景
用偽類元素進(jìn)行效果展示
（1）link visited hover active 順序
/* 未訪問的鏈接 */
a:link{ color: blue; }
a:visited{ color: green; }
/* 點擊后鼠標(biāo)脫離，獲得焦點的鏈接 */
a:focus{ color: grey; }
/*鼠標(biāo)懸停時时呀，內(nèi)容顏色獲得紅色 */
a:hover{ color: red; }
/*選擇活動鏈接*/
a:active{ color: pink; }
（2）first-child VS first-of-type
-
h1:first-child:選擇是h1并且它是長子的元素 -
h1:first-of-type:選擇是h1并且它是它父親里h1類型中的長子的元素
image
關(guān)于first-childVSfirst-of-type的使用在之前的css系列博客文章中有詳細(xì)解釋：
#00你認(rèn)真學(xué)了css张漂？?
二、偽元素
1谨娜、定義
偽元素用于創(chuàng)建一些不在文檔樹中的元素航攒，并為其添加樣式
2、類型
如：
3趴梢、:before 和 :after（也可以寫::before和 ::after）
<div class="box">
<p>這是第一段</p>
</div>
<style>
.box:before{
content: 'start'
}
.box:after{
content: 'end'
}
</style>
使用偽元素before和after的好處：
- 可以在后臺發(fā)現(xiàn)漠畜，p的前后分別出現(xiàn)
::before和::after。html的dom樹中原本沒有::before和::after坞靶，現(xiàn)通過css樣式添加憔狞，使其在dom樹中添加這兩個元素。 - 用添加
::before和::after的目的是為了省標(biāo)簽彰阴。::before生成的效果瘾敢，所在的位置位于父元素（如box）的第一個子元素，::after則位于父元素（如box）的最后一個子元素硝枉，即在html的dom樹上多了兩個子元素廉丽，這兩個子元素?zé)o需在html中體現(xiàn)，只需在css中表示即可妻味。 -
::before和::after所展示的效果相當(dāng)于一個行內(nèi)元素（注意行內(nèi)元素的一些特性） - 其中
content是必不可少
4正压、偽類選擇器的應(yīng)用場景
（1）偽類選擇器應(yīng)用于清除浮動
.clearfix:after {
content:'';
display:block;
clear:both;
}
詳細(xì)解釋請回看之前我寫得關(guān)于浮動的副作用和解決辦法：
#03你認(rèn)真學(xué)了css？（基本樣式3：浮動+定位）
（2）偽類選擇器可作為替代標(biāo)簽
用代碼替代圖片责球，如使用css3實現(xiàn)一個帶邊框的三角符
思路：邊框+三角符號的組合
先確認(rèn)邊框樣式：
.bubble{
position: relative;
padding: 10px;
border-radius: 3px; /*可填可不填*/
background: #fff;
border: 1px solid #000;
display: inline-block;
}
<body>
<div class="bubble">
hello world
</div>
</body>
再確認(rèn)三角樣式：
.bubble:before{
content:'';
width: 10px;
height: 10px;
border-left: 1px solid #000;
border-top: 1px solid #000;
background: #fff;
display: inline-block;
position: absolute;
transform: rotateZ(45deg);
top: -6px;
}
<body>
<div class="bubble">
hello world
</div>
</body>
這里基礎(chǔ)的三角樣式我們在之前已經(jīng)有涉及過怎么使用：
請戳??
#01你認(rèn)真學(xué)了css焦履？（基本樣式1）
使用偽元素怎么實現(xiàn)三角符號（css3 ）：
基礎(chǔ)代碼：（關(guān)于三角形的位置參數(shù)可以使用頁面后臺進(jìn)行調(diào)試）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bubble{ position: relative; padding: 10px; border-radius: 3px; /*可填可不填*/ background: #fff; border: 1px solid #000; display: inline-block; } .bubble:before{ content:''; width: 10px; height: 10px; border-left: 1px solid #000; border-top: 1px solid #000; background: #fff; display: inline-block; transform: rotateZ(45deg); position: absolute; top: -6px; } </style>
</head>
<body>
<div class="bubble">
hello world
</div>
</body>
</html>
結(jié)果：
運用以上知識舉一反三，實現(xiàn)以下效果：
代碼請戳：
我的代碼
（3）偽類選擇器應(yīng)用于element：checked;（勾選住的一個狀態(tài)）
即input元素的自定義重要屬性checkbox或者radio雏逾，實現(xiàn)一個自定義的樣式
如：笑臉切換
/*今天的心情:*/
<input type="checkbox">
<style>
input[type=checkbox]{
-webkit-appearance: none; /*去掉未勾選的方框默認(rèn)樣式*/ appearance: none; background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0 no-repeat;
display: inline-block;
width: 20px;
height: 20px;
background-size: contain; /*背景圖片的大小*/
vertical-align: middle; outline: none;
} /*勾選之后的狀態(tài)*/
input[type=checkbox]:checked{
-webkit-appearance: none;
appearance: none;
background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat;
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
vertical-align: middle;
}
</style>
好處：
- 沒有加js
- 使用該屬性樣式嘉裤，對于
input來說已經(jīng)實現(xiàn)勾選狀態(tài)，自定義加一些自己的圖片栖博，自動加載信息
（4）偽類選擇器應(yīng)用于字體圖標(biāo)
A屑宠、為什么針對字體庫而來的字體，我們可以調(diào)整它的字體大小和顏色仇让？
B典奉、完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" >
</head>
<body>
<span class="iconfont icon-jirengulogojichu2"></span>
<style>
.iconfont{ font-size: 100px; color: red; } </style>
</body>
</html>
在css中添加這個:
/* \e605為字體庫中的特有的一種編碼形式：unicode碼 */
.icon-jirengulogojichu2：before{content:'\e605';}
即：
