css为何不支持父元素选择器

为何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>