偽類與偽元素統稱為偽選擇器。
首先舉兩個簡單地例子看一下區別
偽類的:first-child的舉例
我們如果想要給p中的第一個span更改顏色，通常的做法就是向他添加一個類，然后定義其樣式。
代碼如下：
這里我們更換一種方法，不用添加類
我們直接設置第一個的:first-child偽類來為它添加樣式。
這個時候，被修飾的元素依然處于文檔樹中，以上兩個方法的效果都是相同的。
下面來看偽元素的用法
偽元素的::first-letter的用法
同上一個例子的代碼
在這一段落中我們如果想要給第一個字添加樣式，我們可以用再使用一個span包裹這個字，并為其設置樣式。
代碼如下：
如果我們不包裹它，我們可以用到::first-letter來為這一段的首字母設置樣式。
這樣的話就好像創建了一個虛擬的span并添加了樣式，但是實際在文檔樹中并不存在這個span，以上兩個方法的效果都是相同的。
關于偽類和偽元素使用單冒號還是雙冒號及注意事項
在CSS3的標準中為了區分偽類和偽元素，規定偽類使用單冒號(:)，偽元素使用雙冒號(::)。
但是在此之前都是使用單冒號(:)的，所以偽元素既可以使用雙冒號(::)，同時也支持單冒號(:)的寫法，但在考慮到瀏覽器的兼容問題下，有部分瀏覽器不支持雙冒號的寫法，因此設置的樣式不會生效，也可以依據個人習慣，單、雙冒號都是正確的寫法。
偽類只能使用單冒號(:)寫法。
注意
使用偽類是可以疊加的使用的，可以疊加多個只要不互斥，例：
使用偽元素就相對嚴格很多，它只能在一個元素上出現一次，而且只能在末尾出現，像下面這樣的寫法樣式就不會生效。
簡述偽類選擇器的一些用法(其中分為5類)
1. 狀態偽類
:link
鏈接的正常狀態，選擇那些尚未被點過的鏈接，這個偽類也可以省略，直接在鏈接本身定義樣式
:hover
用戶指針懸停時生效，不只可以用于鏈接
:visited
選擇點擊過的鏈接
:active
選擇被鼠標指針或觸摸操作激活的元素，也可以通過鍵盤來激活，只發生在鼠標按下到被釋放的這段時間里
【上面四個注意順序，“LOVE”可以方便記憶，第一個一定是link，第四個一定是avtive，hover和visited順序可以隨意】
:focus
用于選擇已經通過指針設備、觸摸或鍵盤獲得焦點的元素，在表單里使用得非常多
2. 結構化偽類
:not()
取反偽類，它通過括號接受一個參數，一個“選擇符”。實際上，這個參數也可以是另一個偽類。這個偽類可以連綴使用，但不能包含別的:not選擇符。
:first-child
選擇父元素的第一個子元素
:last-child
選擇父元素的最后一個子元素
:first-of-type
選擇父容器內任意類型子元素的第一個元素
:last-of-type
選擇父容器內任意類型子元素的最后一個元素
:nth-child()
根據元素在標記中的次序選擇相應的元素
【所有的nth偽類都接受一個參數，這個參數是一個公式，公式可以是一個整數，或者關鍵字odd、even或者形如an+/-b的結構】
:nth-last-child
根據元素在標記中的反序選擇相應的元素
:nth-of-type
與:nth-child類似，主要區別是它更具體了，只針對特定類型的元素
:nth-last-of-type
:only-child
選擇父元素中唯一的子元素
:only-of-type
選擇同級中類型唯一的元素，與:only-child類似，但針對特定類型的元素，讓選擇符有了更強的意義
:target
通過元素的ID及URL中的錨名稱選擇元素
3. 表單相關
:checked
選擇被勾選或選中的單選按鈕、多選按鈕及列表選項
:default
從表單中一組類似元素里選擇默認的元素
:disabled
選擇禁用狀態的表單元素。處于禁用狀態的元素，不能被選中、勾選，不能獲得焦點
:empty
選擇其中不包含任何內容的空元素
:enabled
選擇啟用的元素
:in-range
選擇有范圍且值在指定范圍內的元素
:out-of-range
選擇有范圍且值超出指定范圍的元素
:indeterminate
選擇單選按鈕或復選框在頁面加載時沒有被勾選的
:valid
選擇輸入格式符合要求的表單元素
:invalid
選擇輸入格式不符合要求的表單元素
:optional
選擇表單中非必填的輸入字段。換句話說，只要輸入字段中沒有required屬性，就會被:optional偽類選中
:required
選擇有required屬性的表單元素
:read-only
選擇用戶不能編輯的元素
:read-write
選擇用戶可以編輯的元素，適用于有contenteditable屬性的HTML元素
:scope
適用于style標簽中有scoped屬性的情形，如果頁面中某一部分的style標簽里沒有scoped屬性，那么:scope偽類會一直向上查找，直到html元素，即當前樣式表的默認作用范圍。(試驗階段)
4. 語言相關
:dir
選擇文檔中指定了語言方向的元素。換句話說，為了使用:dir偽類，需要在標記中為相關元素指定dir屬性。語言方向目前有兩種：ltr（從左到右）和rtl（從右往左）。目前只有火狐支持該類，在使用時需加前綴( -moz-dir() )
:lang
選擇的元素通過lang=""屬性、相應的meta元素以及HTTP首部的協議信息來確定
5. 其他
:root
選擇文檔中最高層次的父元素
:fullscreen
選擇在全屏模式下顯示的元素，不適用于用戶按F11進入的全屏模式，只適用于通過JavaScript Fullscreen API切換進入的全屏模式，通常由父容器中的圖片、視頻或游戲來調用(試驗階段)
簡述偽元素選擇器的一些用法(其中分為2類)
1. 單雙冒號都可生效
::before
在被選元素前插入內容
::after
在被選元素后插入內容
【對于偽元素::before和::after而言，屬性content是必須設置的，通過這個偽元素生成的內容不能通過其他選擇符選中】
::first-letter
匹配元素中文本的首字母。被修飾的首字母不在文檔樹中
【::first-letter只在display屬性為block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用】
::first-line
匹配元素中第一行的文本。這個偽元素只能用在塊元素中，不能用在內聯元素中。
5. 僅能使用雙冒號才生效
::selection
匹配被用戶選中或者處于高亮狀態的部分。在火狐瀏覽器使用時需要添加-moz前綴。
::placeholder
選擇表單元素中通過placeholder屬性設置的占位文本
::backdrop
在全屏元素后面生成的一個盒子，與:fullscreen偽類連用，修改全屏后元素的背景顏色(試驗階段)
其中有一部分的偽類和偽元素選擇器處于試驗階段，可以在Can I Use或其他網站檢查一下其兼容性。
好了，今天就是文匯軟件小編為大家分享的文章，如果喜歡小編的話就來文匯軟件來看小編更多的文章吧。
