偽類

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

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

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

• 獲取不存在與DOM樹中的信息。比如<a>標(biāo)簽的:link、visited等，這些信息不存在與DOM樹結(jié)構(gòu)中，只能通過CSS選擇器來獲?。?/li>
• 獲取不能被常規(guī)CSS選擇器獲取的信息。比如偽類:target，它的作用是匹配文檔(頁面)的URI中某個(gè)標(biāo)志符的目標(biāo)元素，例如我們可以通過如下代碼來實(shí)現(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代碼來實(shí)現(xiàn)上述的效果，恐怕要復(fù)雜很多。

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

偽元素

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

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

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

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

舉個(gè)綜合使用偽類和偽元素的栗子：

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. 偽類的操作對(duì)象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔數(shù)外的元素；
3. CSS3中偽類和偽元素的語法不同；CSS3規(guī)范中要求使用雙冒號(hào)(::)表示偽元素，以此來區(qū)分偽元素和偽類。然而由于IE8及以下的一些瀏覽器不兼容雙冒號(hào)（::）表示得方法，所以除了少部分偽元素，其余偽元素既可以使用單冒號(hào)(:)，也可以使用雙冒號(hào)(::)。
4. 可以同時(shí)使用多個(gè)偽類，而只能同時(shí)使用一個(gè)偽元素；

偽元素和偽類具體項(xiàng)

1、偽元素：

::before/:before　 　在某個(gè)元素之前插入一些內(nèi)容；
::after/:after　　　　在某個(gè)元素之后插入一些內(nèi)容；
::first-letter/:first-letter　　為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式；
::first-line/:first-line　　　為某個(gè)元素的第一行文字使用樣式；
::selection　　　　 匹配用戶被用戶選中或者處于高亮狀態(tài)的部分；
::placeholder　 　 匹配占位符的文本，只有元素設(shè)置了placeholder屬性時(shí)，該偽元素才能生效；
::backdrop(處于試驗(yàn)階段)　　用于改變?nèi)聊Ｊ较碌谋尘邦伾?，全屏模式的默認(rèn)顏色為黑色。該偽元素只支持雙冒號(hào)的形式；

2、偽類：

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

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

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

:not　　　　　　否定偽類，用于匹配不符合參數(shù)選擇器的元素；
:first-child　　 匹配元素的第一個(gè)子元素；
:last-child　　 匹配元素的最后一個(gè)子元素；
first-of-type　 匹配屬于其父元素的首個(gè)特定類型的子元素的每個(gè)元素；
:last-of-type　 匹配元素的最后一個(gè)子元素；
:nth-child　　 :nth-child根據(jù)元素的位置匹配一個(gè)或者多個(gè)元素，它接受一個(gè)an+b形式的參數(shù)（an+b最大數(shù)為匹配元素的個(gè)數(shù)）；
:nth-last-child　　:nth-last-child與:nth-child相似，不同之處在于它是從最后一個(gè)子元素開始計(jì)數(shù)的；
:nth-of-type　 :nth-of-type與nth-child相似，不同之處在于它是只匹配特定類型的元素；
:nth-last-type :nth-last-of-type與nth-of-type相似，不同之處在于它是從最后一個(gè)子元素開始計(jì)數(shù)的；
:only-child　　 當(dāng)元素是其父元素中唯一一個(gè)子元素時(shí)，:only-child匹配該元素；
:only-of-type　　當(dāng)元素是其父元素中唯一一個(gè)特定類型的子元素時(shí)，:only-child匹配該元素；
:target　　　　　 當(dāng)URL帶有錨名稱，指向文檔內(nèi)某個(gè)具體的元素時(shí)，:target匹配該元素；

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

:checked　　匹配被選中的input元素，這個(gè)input元素包括radio和checkbox；
:default　　 匹配默認(rèn)選中的元素，例如：提交按鈕總是表單的默認(rèn)按鈕；
:disabled　 匹配禁用的表單元素；
:empty　　 匹配沒有子元素的元素。如果元素中含有文本節(jié)點(diǎn)、HTML元素或者一個(gè)空格，則:empty不能匹配這個(gè)元素；
:enabled　　匹配沒有設(shè)置disabled屬性的表單元素；
:in-range 匹配在指定區(qū)域內(nèi)元素；
:out-of-range　 　 與:in-range相反，它匹配不在指定區(qū)域內(nèi)的元素；
:indeterminate　　indeterminate的英文意思是“不確定的”。當(dāng)某組中的單選框或復(fù)選框還沒有選取狀態(tài)時(shí)，:indeterminate匹配該組中所有的單選框或復(fù)選框；
:valid　　 　 匹配條件驗(yàn)證正確的表單元素；
:invalid　　 與:valid相反，匹配條件驗(yàn)證錯(cuò)誤的表單元素；
:optional　　匹配是具有optional屬性的表單元素。當(dāng)表單元素沒有設(shè)置為required時(shí)，即為optional屬性；
:required　　匹配設(shè)置了required屬性的表單元素；
:read-write　　匹配處于編輯狀態(tài)的元素。input，textarea和設(shè)置了contenteditable的HTML元素獲取焦點(diǎn)時(shí)即處于編輯狀態(tài)；
:scope(處于試驗(yàn)階段)　　匹配處于style作用域下的元素。當(dāng)style沒有設(shè)置scope屬性時(shí)，style內(nèi)的樣式會(huì)對(duì)整個(gè)html起作用；

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

:dir(處于實(shí)驗(yàn)階段)　　匹配指定閱讀方向的元素，當(dāng)HTML元素中設(shè)置了dir屬性時(shí)該偽類才能生效?，F(xiàn)時(shí)支持的閱讀方向有兩種：ltr（從左往右）和rtl（從右往左）。目前，只有火狐瀏覽器支持:dir偽類，并在火狐瀏覽器中使用時(shí)需要添加前綴( -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>，這幾個(gè)標(biāo)簽是不支持類似 img::before 這樣使用。究其原因，要想要標(biāo)簽支持偽元素，需要這個(gè)元素是要可以插入內(nèi)容的，也就是說這個(gè)元素要是一個(gè)容器，而 input，img，iframe 等元素都不能包含其他元素，所以不能通過偽元素插入內(nèi)容