一肖方、偽類
1.1 定義
css偽類：css偽類用于向某些選擇器添加特殊效果湿蛔。
偽類其實與普通的css類相類似，可以為已有的元素添加樣式瘫筐，但是他只有處于dom無法描述的狀態(tài)下才能為文檔樹中的元素添加樣式堤魁，所以將其稱為偽類喂链。(這種文檔樹無法描述的狀態(tài)是什么呢？當(dāng)一個元素在用戶的不同行為下就變化成不同的狀態(tài)這個行為的變化dom就無法描述妥泉，就要產(chǎn)生偽類衩藤，來為一些選擇器添加特殊的效果)。
但是細分偽類的話涛漂，又分為動態(tài)偽類，UI元素狀態(tài)偽類检诗，CSS3的:nth選擇器匈仗。
動態(tài)偽類
:link 未訪問的鏈接
:visited 已訪問的鏈接
:hover 鼠標移動到鏈接上
:active 選定的鏈接
:hover 用于當(dāng)用戶把鼠標移動到元素上面時的效果；
:focus 用于元素成為焦點
對于:hover在IE6下只有a元素支持逢慌，:active只有IE7-6不支持悠轩，:focus在IE6-7下不被
UI元素狀態(tài)偽類
:enabled type="text可寫狀態(tài)
:disabled type="text不可狀態(tài)
: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 選擇的元素里面沒有任何內(nèi)容。
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 定義
偽元素：偽元素用于創(chuàng)建一些不在文檔樹中的元素，并且為他添加樣式俱笛，舉個例子：使用偽元素‘::before’可以在一個元素前邊增加一些文本捆姜，并且可以為這些文本添加一些樣式，雖然用戶可以看到這寫文本迎膜，但是這些文本是不存在于文檔樹中的泥技。
1.2 幾種常見偽元素
1）:frist-letter用于向文本中的第一個字母添加樣式
2）:first-line向文本的首行添加樣式
3）:before在元素之前添加內(nèi)容
4）:after在元素之后添加內(nèi)容
5）::selection：匹配選中部分的內(nèi)容】慕觯可用的CSS屬性為background,color珊豹。
1.3 偽元素和偽類的對比
（1）偽類和偽元素的最大區(qū)別就在于有沒有創(chuàng)建一個文檔樹以外的元素。偽元素創(chuàng)建了一個文檔樹以外的元素（虛擬容器）并為他添加樣式榕订，這個容器不包含任何DOM元素但是可以包含內(nèi)容店茶。換句話說偽類和偽元素的區(qū)別就是偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個文檔樹以外的元素劫恒。
（2）偽類使用的是單冒號贩幻，但是在css3中規(guī)定偽元素使用的雙冒號，但是除了少部分的偽元素必須使用雙冒號以外两嘴，像after還有before都是支持單引號的丛楚。為了兼容性所以目前還是在使用一些常見的偽元素的時候采用單冒號較為穩(wěn)妥
1.4 偽元素的content屬性
偽元素的content屬性，不僅僅可以簡單直接的設(shè)置一個字符串作為偽元素的內(nèi)容憔辫，它還具備一定限度的編程能力趣些，如下
div::after{
content: "普通字符串";
content: attr(父元素的html屬性名稱);
content: url(圖片、音頻贰您、視頻等資源的url);
/* 使用unicode字符集坏平，采用4位16進制編碼
* 但不同的瀏覽器顯示存在差異，而且移動端識別度更差
*/
content: "\21e0";
/* content的多個值可以任意組合锦亦，各部分通過空格分隔 */
content: "'" attr(title) "'";
/* 自增計數(shù)器舶替，用于插入數(shù)字/字母/羅馬數(shù)字編號
* counter-reset: [<identifier> <integer>?]+，必選杠园，用于標識自增計數(shù)器的作用范圍坎穿，<identifier>為自定義名稱，<integer>為起始編號默認為0。
* counter-increment: [<identifier> <integer>?]+玲昧，用于標識計數(shù)器與實際關(guān)聯(lián)的范圍栖茉，<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>
