你知道css3的focus-within選擇器嗎？

時間 2020-05-11

標籤知道 css3 css focus 選擇器欄目 CSS 简体版

原文原文鏈接

僞元素和僞類

說到這個，咱們先回顧一下，僞類選擇器和僞元素選擇器，老版的瀏覽器沒有嚴格區分下面 2 種寫法。javascript

a:after{}
a::after{}
複製代碼

在新的標準中，單冒號(:)用於 CSS3 僞類，雙冒號(::)用於 CSS3 僞元素，咱們平時開發時能夠注意一下，固然大多數瀏覽器兩種寫法都能識別。css

常見僞元素和僞類

僞類

:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()
複製代碼

僞類通常用於一個元素的某個狀態，好比說鼠標懸浮，按鈕點擊，連接已經訪問，輸入框聚焦等，還用於選擇某個特殊元素，好比說多個元素中的第一個，最後一個，偶數，奇數等。其做用是對某個符合以上條件的元素添加一些樣式。html

a:hover{
        text-decoration: underline;
    }
a:active {
    color: blue;
}
a:link {
    color: red;
}
a:visited {
    color: green;
}
複製代碼

上面的例子展現了一個a標籤在不一樣狀態下的不一樣樣式，在未點擊連接以前，a標籤呈現紅色字體(link)，在鼠標移到a標籤上是，a標籤出現下劃線(hover)，在鼠標按下的時候，a標籤變爲藍色(active)，點擊完了以後，a標籤變爲綠色(visited)。能夠看到，僞類的做用是爲了給不一樣狀態的標籤添加樣式。前端

僞元素

::first-letter, ::first-line, ::before, ::after
複製代碼

在內容模塊中提到，僞元素若是沒有設置「content」屬性，僞元素是無用的。使用僞元素插入的內容在頁面的源碼裏是不可見的，只能在 css 裏可見。插入的元素在默認狀況下是內聯元素（或者，在 html5 中，在文本語義的類別裏）。所以，爲了給插入的元素賦予高度，填充，邊距等等，你一般必須顯式地定義它是一個塊級元素。還要注意的是典型的 CSS 繼承規則適用於插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應用到 body 元素裏，而後僞元素會像其餘元素同樣繼承這些字體系列。僞元素不會天然繼承自父元素(如 padding margins)的樣式。你的直覺是 :before 和 :after 僞元素多是插入的內容會被注入到目標元素的前或後注入。其實不是這樣的，注入的內容將是有關聯的目標元素的子元素，但它會被置於這個元素的任何內容的「前」或「後」。vue

<head>
    <style type="text/css"> p.box::before { content: "#"; border: solid 1px black; padding: 2px; margin: 0 10px 0 0; } p.box::after { content: "#"; border: solid 1px black; padding: 2px; margin: 0 10px 0 0; } </style>
</head>
<body>
<p class="box">Other content.</p>
</body>
複製代碼

運行效果：能夠看到，咱們html部分只寫了一個元素，可是咱們利用僞元素渲染出來 3 個部分，前中後，這裏咱們能夠認爲，僞元素通常用來輔助html的元素。但在內容頁面的源碼又看不到，利用僞元素能夠實現不少神奇的功能，這裏不作具體講解，後面再出具體教程。html5

神奇的僞類：focus-within

言歸正傳，回到咱們的主角focus-within，咱們知道，僞類focus是指一個元素得到焦點時，爲其添加樣式。focus-within的範圍更廣，它表示一個元素得到焦點，或該元素的後代元素得到焦點。劃重點，它或它的後代得到焦點。這也就意味着，它或它的後代得到焦點，均可以觸發 :focus-within。java

這個屬性有點相似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，均可以接收觸發 :focus-within 事件，相似下面這個簡單的例子這樣：css3

<html>
 <div class="box g-father">
        <div class="box g-children">
            <div class="box button" tabindex="1">button</div>
        </div>
  </div>
  <div class="g-body">HTML</div>
  <style> div { box-sizing: border-box; } .button,.g-children { width: 100%; height: 100%; padding: 20px; border: 1px solid; } .g-father { width: 200px; height: 200px; padding: 20px; border: 1px solid; } .g-body { margin-top: 20px; width: 200px; border: 1px solid; } .g-body:focus-within { background-color: #5daf34; } .g-father:focus-within { background-color: #3a8ee6; } .g-children:focus-within{ background-color: #2c3e50; } .button:focus-within { background-color: #606266; color: red; } </style>
</html>
複製代碼

運行結果：能夠看到，在button得到焦點時，由於冒泡的緣由，它的父級元素所有應用了:focus-within的樣式。這裏值得注意的是，正常的div是不能得到焦點的，設置 tabindex 屬性才能獲取焦點，同時按鍵盤 Tab 鍵也可以讓其獲取焦點，其中 tabindex 的值越小在 tab 鍵切換的時候就會首先聚焦。根據:focus-within的特性，咱們在不利用 js 的狀況下，實現不少實用性的功能。git

感應用戶聚焦區域

利用focus-within能夠增長用戶的感知區域，讓用戶得到更好的視覺反饋。github

<html>
 <div class="g-container">
      <input type="text" placeholder="user name" class="g_input" >
      <input type="text" placeholder="code" class="g_input" >
  </div>
  <style>
    .g-container {
        margin-top: 10vh;
    }
    .g-container {
        padding: 10px;
        width: 30vw;
        border: 1px solid #eee;
        transition: all .3s;
        text-align: center;
    }
    .g-container:focus-within {
        transform: translateY(-4px);
        box-shadow: 0 0 10px #ddd;
        border-color: hsl(199, 98%, 48%);
    }
    .g_input {
        border: none;
        width: 20vw;
        padding: 15px;
        font-size: 18px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        overflow: hidden;
        transition: 0.3s;
        box-shadow: 0 0 0px #ddd;
        &:focus {
            box-shadow: 0 0 10px #ddd;
            border-color: hsl(199, 98%, 48%);
        }
    }
    </style>
</html>
複製代碼

能夠看到在沒有任何javascript邏輯控制狀況下，用focus-within就實現了上面的效果。

實現離屏導航

咱們先看一下效果：

能夠看到是一個很棒的導航效果，並且真個實現沒有使用javascript控制，這無疑在性能和體驗上都有很多提高。具體源碼能夠看下面的地址：地址

實現 B 站，掘金等網站登陸動效切換

咱們平時可能注意到了，B 站和掘金在用戶輸入密碼的時候，上面的圖片是捂着眼睛的，這裏咱們也能夠用focus-within來實現。

<html>
 <div class="g-wrap"></div>
        <div class="g-container">
            <h2>登陸</h2>
            <div class="g-username">
                <input maxlength="64" placeholder="請輸入手機號或郵箱" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username">
            </div>
            <div class="g-password">
                <input type="password" maxlength="64" placeholder="請輸入密碼" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password">
            </div>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal">
    </div>
<style> .g-wrap { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); }  .g-container { position: relative; width: 318px; margin: 100px auto; height: 370px; padding: 20px; box-sizing: border-box; background: #fff; z-index: 10; } .g-container h2 { font-size: 20px; font-weight: bold; margin-bottom: 30px; } .g-container input { outline: none; padding: 10px; width: 100%; border: 1px solid #e9e9e9; border-radius: 2px; outline: none; box-sizing: border-box; font-size: 16px; }  img { position: absolute; top: -20%; left: 50%; width: 120px; height: 95px; transform: translate(-50%, 0); }  .g-username { margin-bottom: 10px; } .g-username img { display: none; width: 120px; height: 113px; }  .g-username:focus-within ~ img { display: none; }  .g-username:focus-within input { border-color: #007fff; } .g-username:focus-within img { display: block; }  .g-password { margin-bottom: 10px; } .g-password img { display: none; width: 103px; height: 84px; top: -15%; }  .g-password:focus-within ~ img { display: none; }  .g-password:focus-within input { border-color: #007fff; } .g-password:focus-within img { display: block; } </style> </html> 複製代碼