CSS魔法堂：稍稍深刻僞類選擇器

時間 2019-11-06

標籤 css 稍稍深刻選擇器欄目 CSS 简体版

原文原文鏈接

前言

過去零零星星地瞭解和使用:link、::after和content等僞類、僞元素選擇器，最近看書時發現這方面有所欠缺，因而決定稍微深刻學習一下，如下爲僞類部分的整理。css

僞類

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

`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開始支持。wordpress

示例：學習

// 當前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。
它們分別是：prototype

鼠標點擊;
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鍵得到焦點。但能夠經過鼠標點擊或腳本時元素得到焦點。code

JS獲取當前獲得焦點的元素

/* 
 * 加載完成時默認返回body
 * 若某元素得到焦點時，則返回該元素
 */
document.activeElement :: HTMLElement

另外還有一個讓人誤會的屬性orm

// 用於檢測文檔是否獲得焦點，即用戶是否正在與頁面交互
// 頁面僅僅位於屏幕可視區域，而用戶沒有與之交互時返回false。
document.hasFocus :: Void -> Boolean

設置子元素得到焦點時，該元素的樣式

:focus-within，用於設置當子元素處於focus狀態時，該元素的樣式。
兼容性:Chrome63開始支持。htm

示例：二次確認密碼時，密碼框高亮

.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，用於設置沒有子節點的元素的樣式。div{ }爲存在TEXT_NODE子節點的元素，而div{}則爲沒有子節點的元素。
:not，做爲謂語表達取反的語義。
:placeholder-shown，用於設置元素placeholder顯示時的樣式。