深入了解CSS偽類選擇器的用法（程式碼範例）-css教學-PHP中文網

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

不言

發布： 2018-09-19 15:57:33

原創

2027 人瀏覽過

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

前言

過去零零星星地了解和使用: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&#39;m not target element.}
.title#1{Yes, I&#39;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]

登入後複製