CSS偽類選擇器的用法案例

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

偽類

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

HTMLAnchorElement的4大經(jīng)典偽類

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

設(shè)置當(dāng)前目標(biāo)元素樣式

?還記得URL中的井號(hào)嗎？從井號(hào)(#)開始到URL的末尾稱為URL的hash或fragment，用于定位頁面內(nèi)某項(xiàng)資源。假設(shè)現(xiàn)在頁面存在<h4 id="title">Target</h4>的元素，那么只要地址欄輸入#title瀏覽器就會(huì)不斷滾動(dòng)(滾動(dòng)不一定存在補(bǔ)間動(dòng)效)直到元素h4#title位于可視區(qū)的特定位置。（注意：請(qǐng)不要和UI Routing混為一談）
?而上述這個(gè)被定位的頁面資源，被稱為目標(biāo)元素或當(dāng)前活動(dòng)元素！可通過:target設(shè)置其樣式。
?兼容性：IE9開始支持。

示例：

// 當(dāng)前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.}

設(shè)置元素獲得焦點(diǎn)時(shí)的樣式

:focus用于設(shè)置元素處于focus狀態(tài)下的樣式。
兼容性：IE8開始支持。
那么哪些元素支持focus狀態(tài)呢？那要先弄清楚通過哪些操作可能實(shí)現(xiàn)focus。
它們分別是：

鼠標(biāo)點(diǎn)擊;

Tab鍵;

通過JavaScript的HTMLElement.prototype.focus()方法。

那么傳統(tǒng)上支持focus狀態(tài)的元素必定是a、button、input、select和textareas.
而HTML5中增加當(dāng)元素設(shè)置了contenteditable或tabindex屬性時(shí)，該元素支持focus狀態(tài)。
也就是符合以下選擇器的元素均支持focus狀態(tài)。

a,button,input,select,textarea,[contenteditable],[tabindex]

注意：若tabindex屬性值小于0，則無法通過Tab鍵獲得焦點(diǎn)。但可以通過鼠標(biāo)點(diǎn)擊 或 腳本時(shí)元素獲得焦點(diǎn)。

JS獲取當(dāng)前得到焦點(diǎn)的元素

/* 
 * 加載完成時(shí)默認(rèn)返回body
 * 若某元素獲得焦點(diǎn)時(shí)，則返回該元素
 */
document.activeElement :: HTMLElement

另外還有一個(gè)讓人誤會(huì)的屬性

// 用于檢測(cè)文檔是否得到焦點(diǎn)，即用戶是否正在與頁面交互
// 頁面僅僅位于屏幕可視區(qū)域，而用戶沒有與之交互時(shí)返回false。
document.hasFocus :: Void -> Boolean

設(shè)置子元素獲得焦點(diǎn)時(shí)，該元素的樣式

:focus-within，用于設(shè)置當(dāng)子元素處于focus狀態(tài)時(shí)，該元素的樣式。
兼容性:Chrome63開始支持。

示例：二次確認(rèn)密碼時(shí)，密碼框高亮

.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偽類選擇器的用法案例的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！