僞元素和僞類

㈠定義

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

⑵僞類：僞類用於當已有元素處於的某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的。好比說，當用戶懸停在指定的元素時，咱們能夠經過:hover來描述這個元素的狀態。雖然它和普通的css類類似，能夠爲已有的元素添加樣式，可是它只有處於dom樹沒法描述的狀態下才能爲元素添加樣式，因此將其稱爲僞類。

 

㈡特色

⑴僞元素和僞類都不會出如今源文檔或者文檔樹中

⑵僞類容許出如今選擇器的任何位置，而一個僞元素只能跟在選擇器的最後一個簡單選擇器後面

⑶僞元素名和僞類名都是大小寫不敏感的

⑷有些僞類是互斥的，而其它的能夠同時用在一個元素上。（在規則衝突的狀況下，常規層疊順序決定結果）。

 

㈢區別

⑴僞類的操做對象是文檔樹中已有的元素。

⑵僞元素則建立了一個文檔數外的元素。

⑶僞類與僞元素的區別在於：有沒有建立一個文檔樹以外的元素。

 

㈣僞元素相關知識點

 

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

⑵單雙冒號問題

①E::before/E:before在E元素內部建立一個行內元素，做爲E的第一個孩子,須要使用content屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中;

②E::after/E:after 在E元素內部建立一個行內元素，做爲E的最後一個孩子,其用法和特性與:before類似;

③E::first-letter/E:first-letter匹配E元素內容的第一個字母,被修飾的首字母不在文檔樹中;

④E::first-lineE/:first-line 匹配E元素內容的第一行,這個僞元素只能用在塊元素中，不能用在內聯元素中

 

⑶雙冒號

①E::selection應用於文檔中被用戶高亮的部分（好比使用鼠標或其餘選擇設備選中的部分）改變字體大小，添加背景色等等,在火狐瀏覽器使用時須要添加-moz前綴。該僞元素只支持雙冒號的形式；

::-moz-selection { color: orange; background: #333; } ::selection { color: orange; background: #333; }

 

②E::placeholder匹配佔位符的文本，只有元素設置了placeholder屬性時，該僞元素才能生效;用於修改input默認的灰色文字的樣式，字體大小和字體顏色等等；爲了瀏覽器兼容性，通常寫爲： input::-webkit-input-placeholder。該僞元素不是CSS的標準，它的實現可能在未來會有所改變，因此要決定使用時必須謹慎。在一些瀏覽器中（IE10和Firefox18及其如下版本）會使用單冒號的形式；

<input type="email" placeholder="name@domain.com"> input::-moz-placeholder { color:#666; } input::-webkit-input-placeholder { color:#666; } /* IE 10 only */ input:-ms-input-placeholder { color:#666; } /* Firefox 18 and below */ input:-moz-input-placeholder { color:#666; }

 

③E::backdorp是在任何處於全屏模式的元素下的即刻渲染的盒子（而且在全部其餘在堆中的層級更低的元素之上）,用於改變全屏模式下的背景顏色，全屏模式的默認顏色爲黑色。該僞元素只支持雙冒號的形式,該僞類用得少，兼容性差，甚至許多瀏覽器並未使用該功能）。

<h1 id="element">This heading will have a solid background color in full-screen mode.</h1> <button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button> 
h1:fullscreen::backdrop { background: orange; }

 

④CSS3規範中的要求使用雙冒號(::)表示僞元素，以此來區分僞元素和僞類，好比::before和::after等僞元素使用雙冒號(::)，:hover和:active等僞類使用單冒號(:)。除了一些低於IE8版本的瀏覽器外，大部分瀏覽器都支持僞元素的雙冒號(::)表示方法。

⑤然而，除了少部分僞元素，如::backdrop必須使用雙冒號，大部分僞元素都支持單冒號和雙冒號的寫法，好比::after，寫成:after也能夠正確運行；可是爲了向後兼容，目前在考慮兼容性的狀況下可使用單冒號的寫法，可是也建議全都使用雙冒號；

⑥使用::before和::after爲了節省標籤，其中content不可或缺可是能夠是空字符；能夠用於清除浮動，替換標籤。

 

㈤僞類的相關知識點

 

⑴CSS 僞類是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀態。例如，:hover可被用於在用戶將鼠標懸停在按鈕上時改變按鈕的顏色。

⑵狀態

①:link用於選擇未訪問的連接；

②:visited用於選擇已訪問的連接；

③:hover用於選擇鼠標指針浮動在其上的元素；

④:active用於選擇活動的連接；

⑤:focus用於選擇獲取焦點的輸入字段。

 

⑶結構化

①:not是一個否認僞類，用於匹配不符合參數選擇器的元素。

<ul> <li class="first-item">一些文本</li> <li>一些文本</li> <li>一些文本</li> <li>一些文本</li> </ul> li:not(.first-item) { color: orange; }

列表除了第一個<li>元素外，其餘<li>元素的文本都會變爲橙色。

 

②:first-child用於匹配元素的第一個子元素。

③: last-child用於匹配元素的最後一個子元素。

④：first-of-type用於匹配屬於其父元素的首個特定類型的子元素的每一個元素。

⑤:last-of-type用於匹配元素的最後一個子元素。

⑥:nth-child根據元素的位置匹配一個或者多個元素，它接受一個an+b形式的參數，an+b匹配到的元素示例以下：

• 1n+0，或n，匹配每個子元素。
• 2n+0，或2n，匹配位置爲二、四、六、8…的子元素，該表達式與關鍵字even等價。
• 2n+1匹配位置爲一、三、五、7…的子元素、該表達式與關鍵字odd等價。
• 3n+4匹配位置爲四、七、十、13…的子元素。

<ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li> </ol>

選擇第二個元素，」Beta」會變成橙色：

ol :nth-child(2) { color: orange; }

選擇位置序號是2的倍數的元素，」Beta」, 「Delta」, 「Zeta」, 「kappa」會變成橙色:

ol :nth-child(2n) { color: orange; }

選擇位置序號爲偶數的元素：

ol :nth-child(even) { color: orange; }

選擇從第6個開始，位置序號是2的倍數的元素，」Zeta」, 「Theta」, 「Kappa」會變成橙色：

ol :nth-child(2n+6) { color: orange; }

 

⑦:nth-last-child與:nth-child類似，不一樣之處在於它是從最後一個子元素開始計數的。

⑧:nth-of-type與nth-child類似，不一樣之處在於它是隻匹配特定類型的元素。

示例：第二個<p>元素會變爲橙色。

HTML: <article> <h1>我是標題</h1> <p>一些文本</p> <a href=""><img src="images/rwd.png" alt="Mastering RWD"></a> <p>這裏的文本是橙色的</p> </article> p:nth-of-type(2) { color: orange; }

 

⑨:nth-last-of-type與nth-of-type類似，不一樣之處在於它是從最後一個子元素開始計數的。

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

<ul> <li>這裏的文本是橙色的</li> </ul> <ul> <li>一些文本</li> <li>一些文本</li> </ul> ul :only-child { color: orange; }

 

⑪:only-of-type用於當元素是其父元素中惟一一個特定類型的子元素時，:only-child匹配該元素。
    以下例，第一個ul元素只有一個li類型的元素，該li元素的文本會變爲橙色。

<ul> <li>這裏的文本是橙色的</li> <p>這裏不是橙色</p> </ul> <ul> <li>一些文本</li> <li>一些文本</li> </ul> li:only-of-type { color: orange; }

 

⑫:target是當該頁面的URL帶有錨名稱，指向文檔內某個具體的元素時，:target匹配該元素。
    以下例，url中的target命中id值爲target的article元素，article元素的背景會變爲黃色。

URL: http://example.com/#target <article id="target"> <h1><code>:target</code> pseudo-class</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p> </article> :target { background: yellow; }

 

㈥表單相關

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

②:default匹配默認選中的元素，例如：提交按鈕老是表單的默認按鈕。

③:disabled匹配禁用的表單元素。

④:empty匹配沒有子元素的元素。若是元素中含有文本節點、HTML元素或者一個空格，則:empty不能匹配這個元素。

⑤:enabled用於匹配沒有設置disabled屬性的表單元素。

⑥:in-range匹配在指定區域內元素。

⑦:out-of-range與:in-range相反，它匹配不在指定區域內的元素。

⑧indeterminate的英文意思是「不肯定的」。當某組中的單選框或複選框尚未選取狀態時，:indeterminate匹配該組中全部的單選框或複選框。

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

⑩:invalid與:valid相反，匹配條件驗證錯誤的表單元素。

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

⑫:required與:optional相反匹配設置了required屬性的表單元素。

⑬:read-only匹配設置了只讀屬性的元素，表單元素能夠經過設置「readonly」屬性來定義元素只讀。

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

⑮:scope(處於試驗階段)匹配處於style做用域下的元素。當style沒有設置scope屬性時，style內的樣式會對整個html起做用。

 

參考：https://www.jianshu.com/p/8b610fdf0d48