前端面試題-偽類和偽元素

entner 發(fā)布于2019-08-01 18:41 / 473人閱讀

摘要：四偽類列舉狀態(tài)偽類狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。目前，只有火狐瀏覽器支持偽類，并在火狐瀏覽器中使用時(shí)需要添加前綴試驗(yàn)階段。

一、偽類和偽元素的引入 1. 規(guī)范說(shuō)明

CSS introduces the concepts of pseudo-elements and pseudo-classes  to permit formatting based on information that lies outside the document tree.

2. 直譯理解

CSS 引入偽類和偽元素的概念是為了格式化文檔樹以外的信息。也就是說(shuō)，偽類和偽元素是用來(lái)修飾不在文檔樹中的部分，比如，一句話中的第一個(gè)字母，或者是列表中的第一個(gè)元素。

二、偽類的概念 1. 規(guī)范解釋

偽類用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的。

2. 舉例說(shuō)明

當(dāng)用戶懸停在指定的元素時(shí)，我們可以通過(guò) :hover 來(lái)描述這個(gè)元素的狀態(tài)。雖然它和普通的 CSS 類相似，可以為已有的元素添加樣式，但是它只有處于 DOM 樹無(wú)法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。

三、偽元素的概念 1. 規(guī)范解釋

偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。

2. 舉例說(shuō)明

我們可以通過(guò) :before 來(lái)在一個(gè)元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹中。

四、偽類列舉

1. 狀態(tài)偽類

狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過(guò)程中元素的狀態(tài)是動(dòng)態(tài)變化的，因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。當(dāng)元素處于某狀態(tài)時(shí)會(huì)呈現(xiàn)該樣式，而進(jìn)入另一狀態(tài)后，該樣式就會(huì)失去。

選擇器	示例	示例說(shuō)明
:link	a:link	選擇所有未訪問(wèn)鏈接
:visited	a:visited	選擇所有訪問(wèn)過(guò)的鏈接
:hover	a:hover	把鼠標(biāo)放在鏈接上的狀態(tài)
:active	a:active	選擇正在活動(dòng)鏈接
:focus	input:focus	選擇元素輸入后具有焦點(diǎn)

2. 結(jié)構(gòu)化偽類

結(jié)構(gòu)化偽類是 CSS3 新增選擇器，利用 DOM 樹進(jìn)行元素過(guò)濾，通過(guò)文檔結(jié)構(gòu)的互相關(guān)系來(lái)匹配元素，能夠減少 class 和 id 屬性的定義，使文檔結(jié)構(gòu)更簡(jiǎn)潔。

選擇器	示例	示例說(shuō)明
:first - child	p:first-child	選擇p元素的第一個(gè)子元素
:first-of-type	p:first-of-type	選擇每個(gè)父元素是p元素的第一個(gè)p子元素
:last-child	p:last-child	選擇所有p元素的最后一個(gè)子元素
:last-of-type	p:last-of-type	選擇每個(gè)p元素是其母元素的最后一個(gè)p元素
:not(selector)	:not(p)	選擇所有p以外的元素
:nth-child(n)	p:nth-child(2)	選擇所有p元素的第二個(gè)子元素
:nth-last-child(n)	p:nth-last-child(2)	選擇所有p元素倒數(shù)的第二個(gè)子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇所有p元素倒數(shù)的第二個(gè)為p的子元素
:nth-of-type(n)	p:nth-of-type(2)	選擇所有p元素第二個(gè)為p的子元素
:only-of-type	p:only-of-type	選擇所有僅有一個(gè)子元素為p的元素
:only-child	p:only-child	選擇所有僅有一個(gè)子元素的p元素
:target	#news:target	選擇當(dāng)前活動(dòng)#news元素(點(diǎn)擊URL包含錨的名字)

3. 表單相關(guān)

選擇器	示例	示例說(shuō)明
:disabled	input:disabled	選擇所有禁用的表單元素
:enabled	input:enabled	選擇沒(méi)有設(shè)置 disabled 屬性的表單元素
:in-range	input:in-range	選擇在指定區(qū)域內(nèi)的元素
:out-of-range	input:out-of-range	選擇不在指定區(qū)域內(nèi)的元素
:valid	input:valid	選擇條件驗(yàn)證正確的表單元素
:invalid	input:invalid	選擇條件驗(yàn)證錯(cuò)誤的表單元素
:required	input:required	選擇設(shè)置 required 屬性的表單元素
:optional	input:optional	選擇沒(méi)有 required 屬性，即設(shè)置 optional 屬性的表單元素
:read-only	input:read-only	選擇設(shè)置 readonly 只讀屬性的元素
:read-write	input:read-write	選擇處于編輯狀態(tài)的元素；input，textarea 和設(shè)置 contenteditable 的 HTML 元素獲取焦點(diǎn)時(shí)即處于編輯狀態(tài)。
:checked	input:checked	匹配被選中的 input 元素，input 元素包括 radio 和 checkbox
:empty	p:empty	匹配所有沒(méi)有子元素的 p 元素
:default		匹配默認(rèn)選中的元素(提交按鈕總是表單的默認(rèn)按鈕)。
:indeterminate		當(dāng)某組中的單選框或復(fù)選框還沒(méi)有選取狀態(tài)時(shí)，:indeterminate 匹配該組中所有的單選框或復(fù)選框。
:scope		匹配處于 style 作用域下的元素。當(dāng) style 沒(méi)有設(shè)置 scope 屬性時(shí)，style 內(nèi)的樣式會(huì)對(duì)整個(gè) html 起作用。(試驗(yàn)階段)

4. 語(yǔ)言相關(guān)

選擇器	作用	說(shuō)明
:lang(language)	匹配設(shè)置了特定語(yǔ)言的元素。	設(shè)置特定語(yǔ)言可以通過(guò)為了 HTML 元素設(shè)置 lang=”” 屬性，設(shè)置 meta 元素的 charset=”” 屬性，或者是在 http 頭部上設(shè)置語(yǔ)言屬性。實(shí)際上，lang=”” 屬性不只可以在 html 標(biāo)簽上設(shè)置，也可以在其他的元素上設(shè)置。
:dir	匹配指定閱讀方向的元素。	當(dāng) HTML 元素中設(shè)置了 dir 屬性時(shí)該偽類才能生效。現(xiàn)時(shí)支持的閱讀方向有兩種：ltr（從左往右）和 rtl（從右往左）。目前，只有火狐瀏覽器支持 :dir 偽類，并在火狐瀏覽器中使用時(shí)需要添加前綴( -moz-dir() )(試驗(yàn)階段)。

5. 其他

選擇器	作用	說(shuō)明
:root	匹配文檔的根元素。	一般的 html 文件的根元素是 html 元素。
:fullscreen	匹配處于全屏模式下的元素。	全屏模式不是通過(guò)按 F11 來(lái)打開(kāi)的全屏模式，而是通過(guò) Javascript 的 Fullscreen API 來(lái)打開(kāi)的，不同的瀏覽器有不同的 Fullscreen API。目前，:fullscreen 需要添加前綴才能使用。

五、偽元素列舉

1. 單雙冒號(hào)

選擇器	作用	說(shuō)明
::before/:before	在被選元素前插入內(nèi)容。	需要使用 content 屬性來(lái)指定要插入的內(nèi)容。被插入的內(nèi)容實(shí)際上不在文檔樹中。
::after/:after	在選被元素后插入內(nèi)容	其用法和特性與:before相似。
::first-letter/:first-letter	匹配元素中文本的首字母。	被修飾的首字母不在文檔樹中。
::first-line/:first-line	匹配元素中第一行的文本。	這個(gè)偽元素只能用在塊元素中，不能用在內(nèi)聯(lián)元素中。

2. 僅雙冒號(hào)

選擇器	作用	說(shuō)明
::selection	匹配被用戶選中或者處于高亮狀態(tài)的部分。	在火狐瀏覽器使用時(shí)需要添加 -moz 前綴。
::placeholder	匹配占位符的文本。	只有元素設(shè)置了 placeholder 屬性時(shí)，該偽元素才能生效。該偽元素不是 CSS 的標(biāo)準(zhǔn)，它的實(shí)現(xiàn)可能在將來(lái)會(huì)有所改變，所以要決定使用時(shí)必須謹(jǐn)慎。在一些瀏覽器中（IE10 和 Firefox18 及其以下版本）會(huì)使用單冒號(hào)的形式。
::backdrop	用于改變?nèi)聊Ｊ较碌谋尘邦伾?/td>	全屏模式的默認(rèn)顏色為黑色。(試驗(yàn)階段)