CSS :focus-within 偽類選擇器

admin發表於2019-06-12
CSS

:focus偽類選擇器大家都比較熟悉，可以匹配獲取焦點的適用元素。

具體用法可以參閱CSS E:focus 選擇器一章節。

本文再來介紹一個與上述選擇器類類似的偽類選擇器:focus-within。

首先從名稱對此選擇器進行分析，由focus於within兩個單詞構成，分析如下：

（1）.focus：翻譯成漢語具有焦點的意思，很容易理解，此選擇器可以匹配獲取焦點的元素。

（2）.within：翻譯成漢語具有在內部等意思，於是可以有理由推測，此選擇器擴充套件了獲取焦點生效範圍。

事實也是如此:focus-within可以匹配當前獲取焦點的元素或者其父輩元素（類似於JavaScript事件冒泡）。

關於JavaScript事件冒泡具體內容可以參閱JavaScript 事件冒泡一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:focus-within{ Rules }

此選擇器在標準瀏覽器中的支援度還不錯，圖示如下：

aid[3325]

瀏覽器支援度隨時可能發生變化，檢測地址https://www.caniuse.com/。

程式碼例項如下：

此選擇器不但可以匹配當前獲取焦點的元素，也可以匹配獲取焦點元素的父輩元素。

特別說明：父輩元素並不僅僅是獲取焦點元素的直接父元素，只要是它的長輩元素即可。

通過此選擇器可以擴充套件獲取焦點的作用範圍，通過一段程式碼例項展示一下它的威力。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  list-style: none;
  font-size: 12px;
  width:240px;
  height:24px;
  line-height:24px;
  margin-bottom: 5px;
}
li:focus-within{
  border:1px dotted blue;
}
</style>
</head>
<body>
  <ul>
    <li><input type="radio" name="ant">螞蟻部落專注於前端知識的分享</li>
    <li><input type="radio" name="ant">只有努力學習才會有美好未來</li>
    <li><input type="radio" name="ant">沒有人一開始就是高手，必須通過努力</li>
    <li><input type="radio" name="ant">把握好當下的時間才會把握好未來</li>
  </ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201906/12/230946phe10dsmw1mvz83j.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當input元素獲取焦點的時候，它的父輩元素也可能夠被:focus-within選擇器匹配。

當然此選擇器還有很多其他的實用技巧，比如當密碼框獲取焦點的時候，也就是準備要輸入密碼了，那麼此密碼框的某個父輩元素可以切換為捂住眼睛的背景圖片（提醒不要讓別人看到），當密碼框失去焦點的時候，再切換為睜開眼睛的背景圖片。非常簡單，本文不再通過程式碼例項介紹。

相關文章