資訊專欄INFORMATION COLUMN
摘要：的偽類選擇器和偽元素選擇器，讓有了更為強(qiáng)大的功能。劃重點(diǎn)，它或它的后代獲得焦點(diǎn)。另外，劃重點(diǎn)，這個(gè)偽類是仍處于實(shí)驗(yàn)室的方案。最后感謝耐心讀完。
CSS 的偽類選擇器和偽元素選擇器，讓 CSS 有了更為強(qiáng)大的功能。
偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實(shí) CSS 對(duì)這兩個(gè)是有區(qū)分的。
有個(gè)錯(cuò)誤有必要每次講到偽類都提一下，有時(shí)你會(huì)發(fā)現(xiàn)偽類元素使用了兩個(gè)冒號(hào) (::) 而不是一個(gè)冒號(hào) (:)，這是 CSS3 規(guī)范中的一部分要求，目的是為了區(qū)分偽類和偽元素，大多數(shù)瀏覽器都支持下面這兩種表示方式。
通常而言，
#id:after{
...
}
#id::after{
...
}
符合標(biāo)準(zhǔn)而言，單冒號(hào)(:)用于 CSS3 偽類，雙冒號(hào)(::)用于 CSS3 偽元素。
當(dāng)然，也有例外，對(duì)于 CSS2 中已經(jīng)有的偽元素，例如 :before，單冒號(hào)和雙冒號(hào)的寫法 ::before 作用是一樣的。
所以，如果你的網(wǎng)站只需要兼容 webkit、firefox、opera 等瀏覽器或者是移動(dòng)端頁面，建議對(duì)于偽元素采用雙冒號(hào)的寫法，如果不得不兼容低版本 IE 瀏覽器，還是用 CSS2 的單冒號(hào)寫法比較安全。
?
:focus-within言歸正傳，今天要說的就是:focus-within?偽類選擇器。
它表示一個(gè)元素獲得焦點(diǎn)，或，該元素的后代元素獲得焦點(diǎn)。劃重點(diǎn)，它或它的后代獲得焦點(diǎn)。
這也就意味著，它或它的后代獲得焦點(diǎn)，都可以觸發(fā)?:focus-within。
:focus-within?的冒泡性這個(gè)屬性有點(diǎn)類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素?html，都可以接收觸發(fā)?:focus-within?事件，類似下面這個(gè)簡(jiǎn)單的例子這樣：
html,
body,
.g-father,
.g-children {
padding: 30px;
border:1px solid #999;
}
input {
...
&:focus {
background: #00bcd4;
}
}
html:focus-within {
background: #e91e63;
}
body:focus-within {
background: #ff5722;
}
.g-father:focus-within {
background: #ffeb3b;
}
.g-children:focus-within {
background: #4caf50;
}
就是這樣：
CodePen Demo -- :focus-within 冒泡觸發(fā)
這個(gè)選擇器的存在，讓 CSS 有了進(jìn)一步的讓元素持久停留在一種新狀態(tài)的的能力。
下面幾個(gè)例子，看看?:focus-within?可以提供什么能力，做些什么事情。
?
它或它的后代獲得焦點(diǎn)，這一點(diǎn)使得讓感知獲焦區(qū)域變得更大，所以，最常規(guī)的用法就是使用?:focus-within?感應(yīng)用戶操作聚焦區(qū)域，高亮提醒。
下面的效果沒有任何 JS 代碼：
這里是什么意思呢？:focus-within?做了什么呢？
:focus?偽類，而是可以給需要的父元素設(shè)置，這樣當(dāng)元素獲焦時(shí)，我可以一并控制它的父元素的樣式核心思想用 CSS 代碼表達(dá)出來大概是這樣：
.g-container:focus-within {
...
input {
....
}
}
DEMO -- CSS focus-within INPUT
運(yùn)用上面思想，我們可以把效果做的更炫一點(diǎn)點(diǎn)，在某些場(chǎng)景制作一些增強(qiáng)用戶體驗(yàn)的效果：
DEMO -- PURE CSS FOCUS By :focus-within
?
在之前的一篇文章里，介紹了兩種純 CSS 實(shí)現(xiàn)的 TAB 導(dǎo)航欄切換方法：
純CSS的導(dǎo)航欄Tab切換方案
現(xiàn)在又多了一種方式，利用了?:focus-within?可以在父節(jié)點(diǎn)獲取元素獲得焦點(diǎn)的特性，實(shí)現(xiàn)的TAB導(dǎo)航切換：
DEMO -- focus-within switch tab
主要的思路就是通過獲焦態(tài)來控制其他選擇器，以及最重要的是利用了父級(jí)的?:not(:focus-within)?來設(shè)置默認(rèn)樣式：
.nav-box:not(:focus-within) {
// 默認(rèn)樣式
}
.nav-A:focus-within ~ .content-box .content-A {
display: block;
}
.nav-B:focus-within ~ .content-box .content-B {
display: block;
}
?
:placeholder-shown?偽類實(shí)現(xiàn)表單效果:focus-within?一個(gè)人能力有限，通常也會(huì)配合其他偽類實(shí)現(xiàn)一些不錯(cuò)的效果。這里要再簡(jiǎn)單介紹的是另外一個(gè)有意思的偽類?:placeholder-shown。
:placeholder-shown：The :placeholder-shown CSS pseudo-class represents any or