CSS僞類整理筆記

0 僞元素

　　虛擬的一個元素，用於向已有的元素添加特殊效果，可用標籤元素實現該效果。

　　css3中規定：僞元素的由兩個冒號::開頭，而後是僞元素的名稱。用兩個冒號::是爲了區別僞類和僞元素（CSS2中並無區別）。固然，考慮到兼容性，CSS2中已存的僞元素仍然可使用一個冒號:的語法，可是CSS3中新增的僞元素必須使用兩個冒號::

　　一個選擇器通常來講只能使用一個僞元素，而且僞元素必須處於選擇器語句的最後。

　　常見的僞元素有如下幾種：

1 ::after
2 ::before
3 ::first-letter
4 ::first-line
5 ::selection
6 ::backdrop

　　(1) ::selection CSS僞元素應用於文檔中被用戶高亮的部分（好比使用鼠標或其餘選擇設備選中的部分）。

　　(2) ::first-letter會選中某 block-level element（塊級元素）第一行的第一個字母，而且文字所處的行以前沒有其餘內容（如圖片和內聯的表格） 。

　　(3) ::first-line CSS pseudo-element （CSS僞元素）在某 block-level element （塊級元素）的第一行應用樣式。第一行的長度取決於不少因素，包括元素寬度，文檔寬度和文本的文字大小。

　　　  ::first-line 不能匹配任何真實存在的html元素。

　　     ::first-line 僞元素只能在塊容器中,因此,::first-line僞元素只能在一個display值爲block, inline-block, table-cell 或者 table-caption中有用.。在其餘的類型中，::first-line 是不起做用的。

　　(4) 僞元素就是控制須要視覺聚焦的元素後面的背景元素樣式的。例如<video>

1 video::backdrop { 
2     background-color: #fff;
3     background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee); 
4     background-size: 16px 16px; 
5     background-position: 0 0, 8px 8px; 
6 }

 

 

1 僞類

　　僞類是爲了經過選擇器找到文檔樹中不存在的信息或基本選擇器找不到的信息。

　　css3中規定，僞類由一個冒號:開頭，冒號後面是僞類的名稱和包含在圓括號中的可選參數。

　　任何常規選擇器能夠再任何位置使用僞類。

　　僞類語法不區別大小寫。一些僞類的做用會互斥，另一些僞類能夠同時被同一個元素使用。而且，爲了知足用戶在操做DOM時產生的DOM結構改變，僞類也能夠是動態的。

　　*當你但願樣式在特定狀態下才被呈現到指定的元素時，你能夠往元素的選擇器後面加上對應的僞類（pseudo-class）。你可能但願某個元素在處於某種狀態下呈現另外一種樣式，例如當鼠標懸停在元素上面時，或者當一個複選框被禁用或被勾選時，又或者當一個元素是它在 DOM 樹中父元素的第一個子元素時。

　　常見的僞類及其功能能夠用下圖表示：

           

　　1. :active :它讓頁面能在瀏覽器監測到激活時給出反饋。當用鼠標交互時，它表明的是用戶按下按鍵和鬆開按鍵之間的時間。 :active 僞類一般用來匹配tab鍵交互。一般用於但並不限於 <a> 和 <button> HTML元素。這個樣式可能會被後聲明的其餘連接相關的僞類覆蓋，這些僞類包括 :link，:hover和 :visited。爲了正常加上樣式，須要把 :active的樣式放在全部連接相關的樣式後，這種連接僞類前後順序被稱爲LVHA順序: :link — :visited — :hover — :active。（僞類之間的權重相同，遵照後面覆蓋前面的特性）。

　　2. :indeterminate CSS 僞類 表示狀態不肯定的表單元素。

　　3. :in-range CSS 僞類 表明一個 <input> 元素，其當前值處於屬性min 和max 限定的範圍以內.

　　4. :optional CSS 僞類 表示任意沒有required屬性的 <input><select> 或 <textarea> 元素使用它。

　　5. :invalid CSS 僞類 表示任意內容未經過驗證的 <input> 或其餘 <form> 元素 .

　　6. :visited CSS僞類表示用戶已訪問過的連接。出於隱私緣由，可使用此選擇器修改的樣式很是有限.這個樣式可能會被後聲明的其餘連接相關的僞類覆蓋，這些僞類包括 (:link, :hover,和:active)。要適當地設置連接樣式，請將:visited 規則放在:link 規則以後，但在:hover 和:active 規則以前，參照 LVHA 順序::link — :visited — :hover — :active。

　　7. :target CSS 僞類 表明一個惟一的頁面元素(目標元素)，其id 與當前URL片斷匹配 .

　　8. :lang() CSS 僞類基於元素語言來匹配頁面元素。

 

2 僞類與僞元素的特性及其區別

1. 僞類本質上是爲了彌補常規CSS選擇器的不足，以便獲取到更多信息；
2. 僞元素本質上是建立了一個有內容的虛擬容器；
3. CSS3中僞類和僞元素的語法不一樣；
4. 能夠同時使用多個僞類，而只能同時使用一個僞元素；

　　在css2中並無明確區分僞元素和僞類。