偽類

css2定義：CSS 偽類用于向某些選擇器添加特殊的效果。
單單看定義完全不懂在講什么生音。
CSS3定義：

• 偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息。
• 偽類由一個冒號:開頭窒升，冒號后面是偽類的名稱和包含在圓括號中的可選參數(shù)缀遍。
• 任何常規(guī)選擇器可以再任何位置使用偽類。偽類語法不區(qū)別大小寫饱须。一些偽類的作用會互斥域醇，另外一些偽類可以同時被同一個元素使用。并且冤寿，為了滿足用戶在操作DOM時產(chǎn)生的DOM結(jié)構(gòu)改變歹苦，偽類也可以是動態(tài)的。

其實第一段話就囊括CSS3偽類的全部定義了督怜，這段話中指出CSS3偽類的功能有兩種：

• 獲取不存在與DOM樹中的信息殴瘦。比如<a>標(biāo)簽的:link、visited等号杠，這些信息不存在與DOM樹結(jié)構(gòu)中蚪腋，只能通過CSS選擇器來獲取姨蟋；
• 獲取不能被常規(guī)CSS選擇器獲取的信息屉凯。比如偽類:target，它的作用是匹配文檔(頁面)的URI中某個標(biāo)志符的目標(biāo)元素眼溶，例如我們可以通過如下代碼來實現(xiàn)頁面內(nèi)的區(qū)域跳轉(zhuǎn)：

<ul class="tabs">
    <li><a href="#tab1">標(biāo)簽一</a></li>
    <li><a href="#tab2">標(biāo)簽二</a></li>
    <li><a href="#tab3">標(biāo)簽三</a></li>
</ul>
<div id="tab1" class="tab_content">
<!--tabed content--></div>
<div id="tab2" class="tab_content">
<!--tabed content--></div>
<div id="tab3" class="tab_content">
<!--tabed content--></div>
//css
.tab_content {
  height: 800px;
  background: red;
  margin-bottom: 100px;
}
#tab1:target, #tab2:target, #tab3:target {
    background:blue;
}

image.png

image.png

table tr:nth-child(2n) td{
   background-color: #ccc;
}
table tr:nth-child(2n+1) td{
   background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

上面的代碼將所有偶數(shù)行背景色設(shè)置為#ccc灌旧，不能被5整除的奇數(shù)行設(shè)置背景色#fff，能夠被5整除的奇數(shù)行設(shè)置背景色#f0f绰筛。

如果不使用偽類而是使用JavaScript代碼來實現(xiàn)上述的效果枢泰，恐怕要復(fù)雜很多。

可以總結(jié)出:nth-child()偽類的效果是將被常規(guī)css選擇器篩選出的元素按照既定規(guī)定進(jìn)行再次篩選铝噩。

偽元素

CSS2中對偽元素的定義：偽元素用于向某些選擇器設(shè)置特殊效果衡蚂。
CSS3定義：

• 偽元素在DOM樹中創(chuàng)建了一些抽象元素，這些抽象元素是不存在于文檔語言里的（可以理解為html源碼）。比如：documen接口不提供訪問元素內(nèi)容的第一個字或者第一行的機(jī)制毛甲，而偽元素可以使開發(fā)者可以提取到這些信息年叮。并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容（比如常見的::before,::after）丽啡。
• 偽元素的由兩個冒號::開頭谋右，然后是偽元素的名稱。
• 使用兩個冒號::是為了區(qū)別偽類和偽元素（CSS2中并沒有區(qū)別）补箍。當(dāng)然改执，考慮到兼容性，CSS2中已存的偽元素仍然可以使用一個冒號:的語法坑雅，但是CSS3中新增的偽元素必須使用兩個冒號::
• 一個選擇器只能使用一個偽元素辈挂，并且偽元素必須處于選擇器語句的最后。(注：不排除未來會加入同時使用多個偽元素的機(jī)制裹粤。)

同樣终蒂，第一段話是偽元素的清晰定義，也是偽元素與偽類最大的區(qū)別遥诉。簡單來說拇泣，偽元素創(chuàng)建了一個虛擬容器，這個容器不包含任何DOM元素矮锈，但是可以包含內(nèi)容霉翔。另外，開發(fā)者還可以為偽元素定制樣式苞笨。

以::first-line為例债朵，它獲取了指定元素的第一行內(nèi)容并且將第一行的內(nèi)容加入到虛擬容器中。如果通過JavaScript來實現(xiàn)這個邏輯瀑凝，那么要考慮的因素就太多了序芦，比如制定元素的寬度、字體大小粤咪，甚至浮動元素的圖文混排等等谚中。當(dāng)然，這些問題確實是可以用JavaScript來解決的寥枝，但是相對于::first-line簡簡單單的幾個字宪塔，用JavaScript恐怕不止這些吧！

舉個綜合使用偽類和偽元素的栗子：

q:lang(de)::after{
    content: " (German) ";
}
q:lang(en)::after{
    content: " (English) ";
}
q:lang(fr)::after{
    content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

以上代碼通過偽類"lang獲取不同lang屬性的節(jié)點(diǎn)脉顿，并為之設(shè)置偽元素::after蝌麸，偽元素的內(nèi)容是此節(jié)點(diǎn)的語言類型点寥。

最后艾疟，總結(jié)一下偽類與偽元素的特性及其區(qū)別：

1. 偽類本質(zhì)上是為了彌補(bǔ)常規(guī)CSS選擇器的不足，以便獲取到更多信息；
2. 偽類的操作對象是文檔樹中已有的元素蔽莱，而偽元素則創(chuàng)建了一個文檔數(shù)外的元素弟疆；
3. CSS3中偽類和偽元素的語法不同；CSS3規(guī)范中要求使用雙冒號(::)表示偽元素盗冷，以此來區(qū)分偽元素和偽類怠苔。然而由于IE8及以下的一些瀏覽器不兼容雙冒號（::）表示得方法，所以除了少部分偽元素仪糖，其余偽元素既可以使用單冒號(:)柑司，也可以使用雙冒號(::)。
4. 可以同時使用多個偽類锅劝，而只能同時使用一個偽元素攒驰；

偽元素和偽類具體項

1、偽元素：

::before/:before　 　在某個元素之前插入一些內(nèi)容故爵；
::after/:after　　　　在某個元素之后插入一些內(nèi)容玻粪；
::first-letter/:first-letter　　為某個元素中的文字的首字母或第一個字使用樣式；
::first-line/:first-line　　　為某個元素的第一行文字使用樣式诬垂；
::selection　　　　 匹配用戶被用戶選中或者處于高亮狀態(tài)的部分劲室；
::placeholder　 　 匹配占位符的文本，只有元素設(shè)置了placeholder屬性時结窘，該偽元素才能生效很洋；
::backdrop(處于試驗階段)　　用于改變?nèi)聊Ｊ较碌谋尘邦伾聊Ｊ降哪J(rèn)顏色為黑色晦鞋。該偽元素只支持雙冒號的形式蹲缠；

2、偽類：

（1）表示狀態(tài)：

:link　　　選擇未訪問的鏈接悠垛；
:visited　 選擇已訪問的鏈接线定；
:hover　　選擇鼠標(biāo)指針移入鏈接；
:active　　被激活的鏈接确买，即按下單擊鼠標(biāo)左鍵但未松開斤讥；
:focus　　選擇獲取焦點(diǎn)的輸入字段；

（2）結(jié)構(gòu)化偽類：

:not　　　　　　否定偽類湾趾，用于匹配不符合參數(shù)選擇器的元素芭商；
:first-child　　 匹配元素的第一個子元素；
:last-child　　 匹配元素的最后一個子元素搀缠；
first-of-type　 匹配屬于其父元素的首個特定類型的子元素的每個元素铛楣；
:last-of-type　 匹配元素的最后一個子元素；
:nth-child　　 :nth-child根據(jù)元素的位置匹配一個或者多個元素艺普，它接受一個an+b形式的參數(shù)（an+b最大數(shù)為匹配元素的個數(shù)）簸州；
:nth-last-child　　:nth-last-child與:nth-child相似鉴竭，不同之處在于它是從最后一個子元素開始計數(shù)的；
:nth-of-type　 :nth-of-type與nth-child相似岸浑，不同之處在于它是只匹配特定類型的元素搏存；
:nth-last-type :nth-last-of-type與nth-of-type相似，不同之處在于它是從最后一個子元素開始計數(shù)的矢洲；
:only-child　　 當(dāng)元素是其父元素中唯一一個子元素時璧眠，:only-child匹配該元素；
:only-of-type　　當(dāng)元素是其父元素中唯一一個特定類型的子元素時读虏，:only-child匹配該元素责静；
:target　　　　　 當(dāng)URL帶有錨名稱，指向文檔內(nèi)某個具體的元素時盖桥，:target匹配該元素泰演；

（3）表單相關(guān)偽類：

:checked　　匹配被選中的input元素，這個input元素包括radio和checkbox葱轩；
:default　　 匹配默認(rèn)選中的元素睦焕，例如：提交按鈕總是表單的默認(rèn)按鈕；
:disabled　 匹配禁用的表單元素靴拱；
:empty　　 匹配沒有子元素的元素垃喊。如果元素中含有文本節(jié)點(diǎn)、HTML元素或者一個空格袜炕，則:empty不能匹配這個元素本谜；
:enabled　　匹配沒有設(shè)置disabled屬性的表單元素；
:in-range 匹配在指定區(qū)域內(nèi)元素偎窘；
:out-of-range　 　 與:in-range相反乌助，它匹配不在指定區(qū)域內(nèi)的元素；
:indeterminate　　indeterminate的英文意思是“不確定的”陌知。當(dāng)某組中的單選框或復(fù)選框還沒有選取狀態(tài)時他托，:indeterminate匹配該組中所有的單選框或復(fù)選框；
:valid　　 　 匹配條件驗證正確的表單元素仆葡；
:invalid　　 與:valid相反赏参，匹配條件驗證錯誤的表單元素；
:optional　　匹配是具有optional屬性的表單元素沿盅。當(dāng)表單元素沒有設(shè)置為required時把篓，即為optional屬性；
:required　　匹配設(shè)置了required屬性的表單元素腰涧；
:read-write　　匹配處于編輯狀態(tài)的元素韧掩。input，textarea和設(shè)置了contenteditable的HTML元素獲取焦點(diǎn)時即處于編輯狀態(tài)窖铡；
:scope(處于試驗階段)　　匹配處于style作用域下的元素疗锐。當(dāng)style沒有設(shè)置scope屬性時郎楼，style內(nèi)的樣式會對整個html起作用；

（4）語言相關(guān)偽類：

:dir(處于實驗階段)　　匹配指定閱讀方向的元素窒悔，當(dāng)HTML元素中設(shè)置了dir屬性時該偽類才能生效。現(xiàn)時支持的閱讀方向有兩種：ltr（從左往右）和rtl（從右往左）敌买。目前简珠，只有火狐瀏覽器支持:dir偽類，并在火狐瀏覽器中使用時需要添加前綴( -moz-dir() )虹钮；
:lang　　　　匹配設(shè)置了特定語言的元素聋庵，設(shè)置特定語言可以通過為了HTML元素設(shè)置lang=””屬性，設(shè)置meta元素的charset=””屬性芙粱，或者是在http頭部上設(shè)置語言屬性祭玉；

（5）其他偽類：

:root　　匹配文檔的根元素。一般的html文件的根元素是html元素春畔，而SVG或XML文件的根元素則可能是其他元素脱货；
:fullscreen　　匹配處于全屏模式下的元素。全屏模式不是通過按F11來打開的全屏模式律姨，而是通過Javascript的Fullscreen API來打開的振峻，不同的瀏覽器有不同的Fullscreen 　API。目前择份，:fullscreen需要添加前綴才能使用扣孟；

注：偽元素雖然強(qiáng)大，但是還是有一些特定的標(biāo)簽是不支持偽元素 before 和 after 的荣赶。諸如 <img> 凤价、<input>、<iframe>拔创，這幾個標(biāo)簽是不支持類似 img::before 這樣使用利诺。究其原因，要想要標(biāo)簽支持偽元素剩燥，需要這個元素是要可以插入內(nèi)容的立轧，也就是說這個元素要是一個容器，而 input躏吊，img氛改，iframe 等元素都不能包含其他元素，所以不能通過偽元素插入內(nèi)容