僞類與僞元素

僞類與僞元素的出現是爲了描述一些現有CSS沒法描述的東西，好比「段落的第一行」、「文章首字母」

僞類：用於操做一些已經在文檔樹中存在的元素

僞元素：用於建立一些不在文檔樹中的元素

常見的僞類：

 

（1）表示狀態：

:link    選擇未訪問的連接,

:visited     選擇已訪問的連接,

:hover    選擇鼠標指針移入的連接,

:active    被激活的連接，即按下單擊鼠標左鍵後的連接,

:focus    選擇獲取焦點的輸入字段

前四個是連接狀態的僞類，在設置的時候必須按照上面的順序來設置，記憶技巧是：

L（:link）OV（:visited）E     H（:hover）A（:active）TE ——愛恨法則

 

（2）結構化僞類：（理解:first-child以及:first-of-type的區別就能很好的理解其餘結構化僞類）

:not(selector)    用於選擇全部selector以外的元素

:first-child    用於匹配全部或指定父元素的第一個規定類型子元素，要注意，匹配成功的條件必須是第一個子元素，以及是規定類型，不然匹配失敗

:last-child    略

:first-of-type    匹配body或指定父元素的全部規定類型元素中出現的第一個元素

:last-of-type    略

:nth-child(num)    :nth-child(1)跟:first-child的做用是一致的。括號內還能夠引入公式或是關鍵字，好比odd，even以及an+b等相似的公式

:nth-last-child(num)    和:nth-child(num)做用相似，可是數字是倒數的

:nth-of-type    :nth-of-type(1)跟:first-of-type的做用是一致的。括號內還能夠引入公式或是關鍵字，好比odd，even以及an+b等相似的公式

:only-of-type    當元素是其父元素特定類型的子元素中惟一一個時，:only-child匹配該元素；

:only-child    當元素是其父元素中惟一一個子元素時，:only-child匹配該元素；

:target    當URL帶有錨名稱，指向文檔內某個具體的元素時，:target匹配該元素；

 

（3）表單相關僞類：

:checked    匹配被選中的input元素，這個input元素包括radio和checkbox

:default    匹配默認選中的元素

:disabled    匹配禁用的表單元素

:empty    匹配沒有子元素的元素。若是元素中含有文本節點、html元素或者一個空格，匹配失敗

:enabled    匹配沒有禁用屬性的表單元素

:indeterminate    匹配某組未被選中的單選框或複選框

:valid    匹配條件驗證正確的表單元素

:invalid    略

::optional    匹配是具備optional屬性的表單元素。當表單元素沒有設置爲required時，即爲optional屬性；

:required    匹配設置了required屬性的表單元素；

:read-write    匹配處於編輯狀態的元素。input，textarea和設置了contenteditable的HTML元素獲取焦點時即處於編輯狀態；

:lang    匹配設置了特定語言的元素，設置特定語言能夠經過爲了HTML元素設置lang=」」屬性，設置meta元素的charset=」」屬性，或者是在http頭部上設置語言屬性；

常見的僞元素：

:before    在元素前加入一個新元素，新元素內容由content屬性決定，能夠是純文本，也能夠用content:url()方式引入圖片，全部在該選擇器中的規則都是用來描述這個新元素的

:after    略

:first-letter    選擇每一個

元素的第一個字母

:first-line    選擇每一個

元素的第一行

僞類與僞元素在W3C中的定義其實意思是同樣的，一個是給選擇器添加效果，一個是將效果添加給選擇器，換言之，其實他們就是爲了讓選擇器有了更強大的描述能力。