為何CSS不支援父選擇器？

這個問題的答案和“為何CSS相鄰兄弟選擇器只支援後面的元素，而不支援前面的兄弟元素？”是一樣的。

瀏覽器解析HTML文件，是從前往後，由外及裡的。所以，我們時常會看到頁面先出現頭部然後主體內容再出現的載入情況。

但是，如果CSS支援了父選擇器，那就必須要頁面所有子元素載入完畢才能渲染HTML文件，因為所謂“父選擇器”，就是後代元素影響祖先元素，如果後代元素還沒載入處理，如何影響祖先元素的樣式？於是，網頁渲染呈現速度就會大大減慢，瀏覽器會出現長時間的白板。載入多少HTML就可以渲染多少HTML，在網速不是很快的時候，就顯得尤為的必要。比方說你現在看的這篇文章，只要文章內容加載出來就可以了，就算後面的廣告指令碼阻塞了後續HTML文件的載入，我們也是可以閱讀和體驗。但是，如果支援父選擇器，則整個文件不能有阻塞，頁面的可訪問性則要大大降低。

有人可能會說，要不採取載入到哪裡就渲染到哪裡的策略？這樣子問題更大，因為會出現載入到子元素的時候，父元素本來渲染的樣式突然變成了另外一個樣式的情況，體驗非常不好。

“相鄰選擇器只能選擇後面的元素”也是一樣的道理，不可能說後面的HTML載入好了，還會影響前面HTML的樣式。

所以，從這一點來講，CSS支援“父選擇器”或者“前兄弟選擇器”的可能性要比其他炫酷的CSS特性要低，倒不是技術層面，而是CSS和HTML本身的渲染機制決定的。當然，以後的事情誰都說不準，說不定以後網速都是每秒幾個G的，網頁載入速度完全就忽略不計，說不定就會支援了。

如何在CSS中實現父選擇器效果？

雖然說至今尚無瀏覽器支援原生的父選擇器效果，但是，我們是可以通過其他手段來實現父選擇器效果的，雖說不是100%完全，但是，一般的專案需求都是可以滿足的，如何實現呢？如果用一句話解釋原理就是“把兄弟元素作為祖先元素使用”。

本文介紹的“父選擇器”技術，涉及多個技術tips，但是，幸運的是，這些特性從IE7瀏覽器開始都是支援的，因此，本文的模擬父選擇器效果相容IE7+瀏覽器。

類似這樣的技術tips學習，你唾沫橫飛說得天花亂墜也不如一個活蹦亂跳的例項效果好。

.container {
    min-height: 120px;
    /* z-index用來建立新的層疊上下文，這樣子元素的z-index:-1不會超出容器 
       具體可參見：http://www.zhangxinxu.com/wordpress/?p=5115
    */
    position: relative; z-index: 1;
}
.list
 
 {
    /* 已經輸入的姓名列表 */
    display: inline-block; background-color: #f0f3f9;
}
.list:after {
    content: '×';
}
.input {
    /* 去掉輸入框預設UI */
    width: 80px; border: 0; background: none;  
}
.border {
    /* 尺寸永遠和容器一樣大，假裝是容器 */
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;
    border: 1px solid #bbb;
}
.input:focus + .border {
    /* 模擬父選擇器效果精髓所在 */
    border-color: #1271E0;    
}
HTML程式碼：
<div class="container">
    <span class="list">李易峰</span>
    <span class="list">趙麗穎</span>
    <span class="list">楊紫</span><input id="input" class="input">
    <label class="border" for="input"></label>
</div>