深入了解CSS偽類選擇器的用法（程式碼範例）

這篇文章帶給大家的內容是關於深入了解偽類選擇器的用法（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

前言

 過去零零星星地了解和使用: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，用來定位頁內某項資源。假設現在頁面存在

Target

的元素，那麼只要地址列輸入#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鍵取得焦點。但可以透過滑鼠點擊 或 腳本時元素來獲得焦點。

JS取得目前得到焦點的元素

/* 
 * 加载完成时默认返回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，用於設定元素的樣式，從IE9開始支援。

:checked，用於設定單選和複選控制項被選取的樣式，從IE9開始支援。結合偽元素::before和content屬性可以實現靈活高效的自訂單選和複選控制項。

:empty，用來設定沒有子節點的元素的樣式。 p{ }為存在TEXT_NODE子節點的元素，而p{}則為沒有子節點的元素。

:not，作為謂語表達取反的語意。

:placeholder-shown，用於設定元素placeholder顯示時的樣式。

以上是深入了解CSS偽類選擇器的用法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！