&nbs p;
一、为何 CSS 不支持父选择器？
这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素，而不支持前面的兄弟元素？”是一样的。
浏览器解析 HTML 文档，是从前往后，由外及里的。所以，我们时常会看到页面先出现头部然后 主体 内容再出现的加载情况。
但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HT ML 文档，因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响祖先元素的样式？于是，网页渲染呈现速度就会大大减慢，浏览器会出现长时间的白板。加载多少HTML就可以渲染多少HTML，在 网速 不是很快的时候，就显得尤为的必要。比方说你现在看的这篇 文章 ，只要文章内容加载出来就可以了，就算后面的广告脚本阻塞了后续HTML文档的加载，我们也是可以阅读和体验。但是，如果支持父选择器，则整个文档不能有阻塞，页面的可访问性则要大大降低。
有人可能会说，要不采取加载到哪里就渲染到哪里的策略？这样子问题更大，因为会出现加载到子元素的时候，父元素本来渲染的样式突然变成了另外一个样式的情况，体验非常不好。
“相邻选择器只能选择后面的元素”也是一样的道理，不可能说后面的HTML加载好了，还会影响前面HTML的样式。
所以，从这 一点 来讲，CSS支持“父选择器” 或者 “前兄弟选择器”的可能性要比其他炫酷的CSS特性要低，倒不是技 术 层面，而是CSS和HTML本身的渲染机制决定的。当然，以后的事情谁都说不准，说不定以后网速都是每秒几个G的，网页加载速度完全就忽略不计，说不定就会支持了。
二、如 何在 CSS中实现父选择器效果？
虽然说至今尚无浏览器支持原生的父选择器效果，但是，我们是可以通过其他 手段 来实现父选择器效果的，虽说不是100%完全，但是，一般的项目需求都是可以满足的，如何实现呢？如果用一句话解释原理就是“ 把兄弟元素作为祖先元素使用 ”。
本文介绍的“父选择器”技术，涉及多 个技 术tips，但是，幸运的是，这些特性从IE7浏览器 开始 都是支持的，因此，本文的模拟父选择器效果兼容IE7+浏览器。
类似这样的技术tips学习，你唾沫横飞说得天花乱坠也不如一个活蹦乱跳的实例效果好。
您狠狠地点击这里：子元素focus，容器边框高亮demo
下图为默认态效果：
类似这种效果大家一定见过，就是我们在写邮件的时候，在输入收件人的时候，会自动匹配名字，当我们选中此名字后，就会在输入区域的前面显示。实际在web网页开发的时候，这种交互也是会遇到的，比方说一次性给多个好友发送私信的时候，或者类似demo这里给《青 云 志》添加主演姓名信息。
一般而言，输入框藏在姓名列表的后面，就像这样：
长度不会很长，因为容易换到下一行。好了，现在需求来了，交互设计师希望用户focus这个小小输入框的时候，外面容器的灰色边框要高亮，就像下面这样：
请问如何实现？
根据我的妄加推断，市面上，90%及其以上都是使用JS实现的，类似这样：
$('input').focus(function() { $(this).parent().addClass('highlight'); }); 因为没办法呀，没有浏览器支持父选择器！
此时，广大CSSer的心中一定在呐喊，如果天降一个父选择器该多好啊！这就是为何父选择器呼声很高的 原因 之一，因为确实有广泛的应用场景。
好了，回到现实，浏览器支持父选择器遥遥无期！
是固执地希望用纯CSS实现还是妥协JS实现？OK，告诉大家，纯CSS是可以实现的，而且就是一些 简单 的CSS特性组合而成实现的，没有什么高深难懂的地方，而且兼容性出奇的好，IE7+浏览器都支持。
例如，下图这个效果就是纯CSS实现的，通用DOM结构设计和其他选择器实现的：
那具体原理是 怎样 的呢？
大致分为下面3步：
原先的父级容器只处理结构，不负责 外观 。CSS代码如下：
.cont ai ner { min-h ei ght: 120px; pos IT ion: relative; z -i ndex: 1; } 其中，这里的 z-index:1 用来创建新的层叠上下文，这样子元素的 z-index:-1 不会超出容器，具体可参见“深入理解CSS中的层叠上下文和层叠顺序”一文。 新建一个元素负责容器的外观，放置在输入框的后面，使用absolute拉伸和容器 尺寸 一致。于是HTML结构变成这样：
<div class="container"> <input id="input" class="input"> <!-- 下面的label就是新建的负责容器外观的元素 --> <label class="border" for="input"></label> </div>
CSS代码如下：
.border { /* 尺寸自适应容器大小，假装是容器 */ position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* 在输入框的下面 */ z-index: -1; /* 外观模拟 */ border: 1px solid # bbb; } 绝对定位元素，如果没有具体的 width / height 限定，left/right以及top/bottom对立方位的数值会拉伸元素的尺寸。这里这里，全部都设为 0 ，和 .container 所在元素组合，就形成了类似 宽 高100%同时 box -s izing:border-box; 的效果，所以，如果你想让IE7浏览器实现类似 border-box 的盒尺寸计算，某些情况下，就可以使用绝对定位拉伸，别说我没告诉你哦！ 通过相邻兄弟选择器，控制容器的样式变化，CSS代码如下：
.input:focus + .border { /* 容器 边框颜色 高亮 */ border-color: #1271E0; } 于是乎，当我们focus输入框的时候，那个大大的灰色边框就高亮了！看上去高亮的是外部的容器，实际上是输入框的兄弟元素，这就是上面所说的“ 把兄弟元素作为祖先元素使用 ”！
小结
根据我的实际开发经验，基本上，所以需要使用父选择器控制样式的地方，都可以使用这种策略实现。本文的例子就全当是抛砖引玉，当在座的诸位以后遇到类似需求的时候，希望可以想起这篇文章，说不定会对你的实现带来 全新 的思路。
三、关于父选择器的一些八卦知识
此处八卦知识采撷自 知乎 “CSS 中能否选取父元素？”这个问题一丝的回答。
总结一下就是2个槽点：
CSS4中父选择器的语法 变身了3次 ：
2011年，语法是 $E > F ，例如：
$input:focus > .container {} 这种语法是网络上流传最多的用法，实际上，早就淘汰很久了，大家要明鉴啊！ 2012-2013年的语法是 !E > F ，例如：
!input:focus > .container {} 昙花一现。 2014年，语法使用:has() 伪类 (Relational Pseudo-class)，例如：
.container:has(> input:focus) {} 最后一次的变身 :has 推迟到CSS5 了。
恩，大家这下都明白了吧！
哈？明白什么？这还要问吗，那就是至少10年之内不会出现CSS父选择器了呀！还CSS5呢，也不看看CSS4这会儿才刚刚开始长毛呢！
所以大家还是醒醒，学学本文提供的实现思路吧！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-如何在CSS中实现父选择器效果？ 全部内容，希望文章能够帮你解决 html5教程-如何在CSS中实现父选择器效果？ 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-如何在CSS中实现父选择器效果？的详细内容...