偶然間發現新的CSS偽類:focus-within，能非常方便處理獲取焦點狀態。
當元素本身或其後代獲得焦點時，:focus-within偽類的元素就會有效。
沒看懂，可以看下面的例子：
<div class="container" tabindex="0">
<label for="text">Enter text</label>
<input id="text" type="text" />
</div>
.container:focus-within {
background-color: #aaa;
}
如果div.container獲取到焦點時，就會有一個#aaa背景色。而且如果其後代元素獲得焦點時，其背景色也會更改，所以<input>收到焦點時，div的背景色仍是#aaa。
這樣，我們就不需要實現這樣功能時，總是使用JavaScript，極大方便開發者。
但是，瀏覽器支持:focus-within還是很少，不過相信很快，就會全面支持。
大家可以看下面的gif動畫（在Firefox瀏覽器下實現）
可以在支持的瀏覽器下，打開此codepen看看效果。
相關推薦
'CSS選擇器和優先級總結，告誡自己不能任性使用！important'
"如果在項目裡面使用了通用的reset.css樣式，但是在具體的頁面裡面要對同一個樣式進行覆蓋式修改，不借助與scoped的和inner style，你會怎麼做？會不會像我一樣在剛接觸的時候給要覆蓋的樣式後面加上!important屬性本文將告訴大家關於CSS選擇器和優先級...
'CSS 偽元素基礎知識：before 與after （一）'
"最近因為一些網頁的需要，需要比較深入的使用了CSS 的「偽元素」( Pseudo Element )，發現原來不只是用用before或after 而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法歸納整理下，希望對你的日常工作有所幫助。什麼是「偽元素」？...
'前端項目迭代發版防止瀏覽器緩存js和css'
"歡迎關注我的頭條號：Wooola，專注於Java、Golang、微服務架構，致力於每天分享原創文章、快樂編碼和開源技術。前言最近發版前端項目，用戶經常反饋新添加功能在線上環境不好用，常出現新老頁面並存的狀況。經前端同事排查法發現，實際上只需要重新刷新一下頁面就沒事了。但是...
'VS code 你們都在用嗎？或許你們需要看一下(配置類插件)篇'
"在前端開發中，有一個非常好用的工具，Visual Studio Code，簡稱VS code。 都不用我安利VS code，大家就會乖乖的去用，無數個大言不慚的攻城獅，都被VS code比德芙還絲滑的強大功能所折服。 我是來給大家安利插件的，想做個比較全面的插件集合給大家...
新媒體運營主管自我評價簡歷範文
自我評價（案例一）?熟悉微博、微信及其他社會化媒體營銷的運作模式和流程，具有策劃專題，具有管理運營新媒體的能力和較強的營銷策劃推廣能力；?與媒體保持良好關係，有一定市場營銷及相關工作基礎，具有全面統籌及運營新媒體平臺及多方媒體資源的能力；?多年大型活動策劃/文案及執行工作，...
人生第一份工作
市場營銷
產品運營
軟件
網頁設計
Premiere
Google
Alexa Internet
JavaScript
Photoshop
範文
CSS
PowerPoint
經濟
2019-07-01
網頁設計師要懂的前端知識之CSS基礎
1. CSS 介紹層疊樣式表（CSS），又稱串樣式列表，由W3C定義和維護的標準，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和...
如何更有逼格的用JS控制CSS顏色？
作者 | Adam Giese譯者 | 王強CSS 中有兩種顏色模型 RGB 和 HSL，如何用 JavaScript 控制它們？背景知識：顏色模型點開這...
推薦中...