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

1、僞類和僞元素的引入

1. 規範說明

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

2. 直譯理解

CSS 引入僞類和僞元素的概念是爲了格式化文檔樹之外的信息。也就是說，僞類和僞元素是用來修飾不在文檔樹中的部分，好比，一句話中的第一個字母，或者是列表中的第一個元素。

2、僞類的概念

1. 規範解釋

僞類用於當已有元素處於的某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的。

2. 舉例說明

當用戶懸停在指定的元素時，咱們能夠經過 :hover 來描述這個元素的狀態。雖然它和普通的 CSS 類類似，能夠爲已有的元素添加樣式，可是它只有處於 DOM 樹沒法描述的狀態下才能爲元素添加樣式，因此將其稱爲僞類。

3、僞元素的概念

1. 規範解釋

僞元素用於建立一些不在文檔樹中的元素，併爲其添加樣式。

2. 舉例說明

咱們能夠經過 :before 來在一個元素前增長一些文本，併爲這些文本添加樣式。雖然用戶能夠看到這些文本，可是這些文本實際上不在文檔樹中。

4、僞類列舉

1. 狀態僞類

狀態僞類是基於元素當前狀態進行選擇的。在與用戶的交互過程當中元素的狀態是動態變化的，所以該元素會根據其狀態呈現不一樣的樣式。當元素處於某狀態時會呈現該樣式，而進入另外一狀態後，該樣式就會失去。

選擇器	示例	示例說明
:link	a:link	選擇全部未訪問連接
:visited	a:visited	選擇全部訪問過的連接
:hover	a:hover	把鼠標放在連接上的狀態
:active	a:active	選擇正在活動連接
:focus	input:focus	選擇元素輸入後具備焦點

2. 結構化僞類

結構化僞類是 CSS3 新增選擇器，利用 DOM 樹進行元素過濾，經過文檔結構的互相關係來匹配元素，可以減小 class 和 id 屬性的定義，使文檔結構更簡潔。

選擇器	示例	示例說明
:first - child	p:first-child	選擇p元素的第一個子元素
:first-of-type	p:first-of-type	選擇每一個父元素是p元素的第一個p子元素
:last-child	p:last-child	選擇全部p元素的最後一個子元素
:last-of-type	p:last-of-type	選擇每一個p元素是其母元素的最後一個p元素
:not(selector)	:not(p)	選擇全部p之外的元素
:nth-child(n)	p:nth-child(2)	選擇全部p元素的第二個子元素
:nth-last-child(n)	p:nth-last-child(2)	選擇全部p元素倒數的第二個子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇全部p元素倒數的第二個爲p的子元素
:nth-of-type(n)	p:nth-of-type(2)	選擇全部p元素第二個爲p的子元素
:only-of-type	p:only-of-type	選擇全部僅有一個子元素爲p的元素
:only-child	p:only-child	選擇全部僅有一個子元素的p元素
:target	#news:target	選擇當前活動#news元素(點擊URL包含錨的名字)

3. 表單相關

選擇器	示例	示例說明
:disabled	input:disabled	選擇全部禁用的表單元素
:enabled	input:enabled	選擇沒有設置 disabled 屬性的表單元素
:in-range	input:in-range	選擇在指定區域內的元素
:out-of-range	input:out-of-range	選擇不在指定區域內的元素
:valid	input:valid	選擇條件驗證正確的表單元素
:invalid	input:invalid	選擇條件驗證錯誤的表單元素
:required	input:required	選擇設置 required 屬性的表單元素
:optional	input:optional	選擇沒有 required 屬性，即設置 optional 屬性的表單元素
:read-only	input:read-only	選擇設置 readonly 只讀屬性的元素
:read-write	input:read-write	選擇處於編輯狀態的元素；input，textarea 和設置 contenteditable 的 HTML 元素獲取焦點時即處於編輯狀態。
:checked	input:checked	匹配被選中的 input 元素，input 元素包括 radio 和 checkbox
:empty	p:empty	匹配全部沒有子元素的 p 元素
:default		匹配默認選中的元素(提交按鈕老是表單的默認按鈕)。
:indeterminate		當某組中的單選框或複選框尚未選取狀態時，:indeterminate 匹配該組中全部的單選框或複選框。
:scope		匹配處於 style 做用域下的元素。當 style 沒有設置 scope 屬性時，style 內的樣式會對整個 html 起做用。(試驗階段)

4. 語言相關

選擇器	做用	說明
:lang(language)	匹配設置了特定語言的元素。	設置特定語言能夠經過爲了 HTML 元素設置 lang=」」 屬性，設置 meta 元素的 charset=」」 屬性，或者是在 http 頭部上設置語言屬性。實際上，lang=」」 屬性不僅能夠在 html 標籤上設置，也能夠在其餘的元素上設置。
:dir	匹配指定閱讀方向的元素。	當 HTML 元素中設置了 dir 屬性時該僞類才能生效。現時支持的閱讀方向有兩種：ltr（從左往右）和 rtl（從右往左）。目前，只有火狐瀏覽器支持 :dir 僞類，並在火狐瀏覽器中使用時須要添加前綴( -moz-dir() )(試驗階段)。

5. 其餘

選擇器	做用	說明
:root	匹配文檔的根元素。	通常的 html 文件的根元素是 html 元素。
:fullscreen	匹配處於全屏模式下的元素。	全屏模式不是經過按 F11 來打開的全屏模式，而是經過 Javascript 的 Fullscreen API 來打開的，不一樣的瀏覽器有不一樣的 Fullscreen API。目前，:fullscreen 須要添加前綴才能使用。

5、僞元素列舉

1. 單雙冒號

選擇器	做用	說明
::before/:before	在被選元素前插入內容。	須要使用 content 屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中。
::after/:after	在選被元素後插入內容	其用法和特性與:before類似。
::first-letter/:first-letter	匹配元素中文本的首字母。	被修飾的首字母不在文檔樹中。
::first-line/:first-line	匹配元素中第一行的文本。	這個僞元素只能用在塊元素中，不能用在內聯元素中。

2. 僅雙冒號

選擇器	做用	說明
::selection	匹配被用戶選中或者處於高亮狀態的部分。	在火狐瀏覽器使用時須要添加 -moz 前綴。
::placeholder	匹配佔位符的文本。	只有元素設置了 placeholder 屬性時，該僞元素才能生效。該僞元素不是 CSS 的標準，它的實現可能在未來會有所改變，因此要決定使用時必須謹慎。在一些瀏覽器中（IE10 和 Firefox18 及其如下版本）會使用單冒號的形式。
::backdrop	用於改變全屏模式下的背景顏色。	全屏模式的默認顏色爲黑色。(試驗階段)

閱讀更多：WEBING
參考文章：AlloyTeam