過去零零星星地瞭解和使用:link、::after和content等偽類、虛擬元素選取器，最近看書時發現這方面有所欠缺，於是決定稍微深入學習一下，以下為偽類部分的整理。
偽類別選取器實質上是讓設計師可以根據元素特定的狀態，設定不同的視覺效果。具體有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。
HTMLAnchorElement的4大經典偽類:link，用於設定連結初始狀態時的樣式;
:visited，用於設定連結被點擊過後的樣式;
:hover，用於設定滑鼠移至上方在連結上方時，連結的樣式;
:active，用於設定滑鼠按鍵按下，但未釋放時，連結的樣式。
想必各位都和我一樣，最初接觸到的就是上述4個偽類了吧？！而且還死機硬背它們的設定順序(LVAH)吧，哈哈。
還記得URL中的井號嗎？從井號(#)開始到URL的末尾稱為URL的hash或fragment，用於定位頁面內某項資源。假設現在頁面存在<h3 id="title">Target</h3>的元素，那麼只要地址欄輸入#title瀏覽器就會不斷滾動(滾動不一定存在補間動效)直到元素h3#title位於可視區的特定位置。（注意：請不要和UI Routing混為一談）
而上述這個被定位的頁面資源，被稱為目標元素或當前使用中的元素！可通過:target設定其樣式。
相容性：IE9開始支援。
樣本：
// 當前URL為http://foo.com#1:target { color: red;}.title{ color: blue; &:target{ border: solid 1px red; }}.title{I'm not target element.}.title#1{Yes, I'm.}
:focus用於設定元素處於focus狀態下的樣式。
相容性：IE8開始支援。
那麼哪些元素支援focus狀態呢？那要先弄清楚通過哪些操作可能實現focus。
它們分別是：
滑鼠點擊;
Tab鍵;
通過JavaScript的HTMLElement.prototype.focus()方法。
那麼傳統上支援focus狀態的元素必定是a、button、input、select和textareas.
而HTML5中增加當元素設定了contenteditable或tabindex屬性時，該元素支援focus狀態。
也就是符合以下選取器的元素均支援focus狀態。
a,button,input,select,textarea,[contenteditable],[tabindex]
注意：若tabindex屬性值小於0，則無法通過Tab鍵獲得焦點。但可以通過滑鼠點擊 或 指令碼時元素獲得焦點。
/* * 載入完成時預設返回body * 若某元素獲得焦點時，則返回該元素 */document.activeElement :: HTMLElement
另外還有一個讓人誤會的屬性
// 用於檢測文檔是否得到焦點，即使用者是否正在與頁面互動// 頁面僅僅位於螢幕可視地區，而使用者沒有與之互動時返回false。document.hasFocus :: Void -> Boolean
:focus-within，用於設定當子項目處於focus狀態時，該元素的樣式。
相容性:Chrome63開始支援。
樣本：二次確認密碼時，密碼框高亮
.form-control{ &:focus-within > input{ &:focus { border: solid 1px skyblue; } &:not(:focus){ border: solid 1px orange; } }}.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]
:root，用於設定<html>元素的樣式，從IE9開始支援。
:checked，用於設定單選和複選控制項被選中的樣式，從IE9開始支援。結合虛擬元素::before和content屬性可以實現靈活高效的自訂單選和複選控制項。
:empty，用於設定沒有子節點的元素的樣式。p{ }為存在TEXT_NODE子節點的元素，而p{}則為沒有子節點的元素。
:not，作為謂語表達取反的語義。
:placeholder-shown，用於設定元素placeholder顯示時的樣式。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
