CSS偽類選擇器的用法案例

小編給大家分享一下CSS偽類選擇器的用法案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

偽類

?偽類選擇器實質上是讓設計師可以根據元素特定的狀態，設置不同的視覺效果。具體有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。

HTMLAnchorElement的4大經典偽類

想必各位都和我一樣，最初接觸到的就是上述4個偽類了吧？！而且還死機硬背它們的設置順序(LVAH)吧，哈哈。

設置當前目標元素樣式

?還記得URL中的井號嗎？從井號(#)開始到URL的末尾稱為URL的hash或fragment，用于定位頁面內某項資源。假設現在頁面存在<h4 id="title">Target</h4>的元素，那么只要地址欄輸入#title瀏覽器就會不斷滾動(滾動不一定存在補間動效)直到元素h4#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]

其他

以上是CSS偽類選擇器的用法案例的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！