偽類與偽元素統稱為偽選擇器。
首先舉兩個簡單地例子看一下區別
偽類的: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或其他網站檢查一下其兼容性。
好了,今天就是文匯軟件小編為大家分享的文章,如果喜歡小編的話就來文匯軟件來看小編更多的文章吧。



