这里介绍的“父选择器”技术，涉及多个技术tips，但是，幸运的是，这些特性从IE7浏览器开始都是支持的，因此，模拟父选择器效果兼容IE7+浏览器。
类似这样的技术tips学习，你唾沫横飞说得天花乱坠也不如一个活蹦乱跳的实例效果好。
.container {
min-height: 120px
/* z-index用来创建新的层叠上下文，这样子元素的z-index:-1不会超出容器
具体可参见：http://www.zhangxinxu.com/wordpress/?p=5115
*/
position: relativez-index: 1
}
.list {
/* 已经输入的姓名列表 */
display: inline-blockbackground-color: #f0f3f9
}
.list:after {
content: '×'
}
.input {
/* 去掉输入框默认UI */
width: 80pxborder: 0background: none
}
.border {
/* 尺寸永远和容器一样大，假装是容器 */
position: absoluteleft: 0right: 0top: 0bottom: 0z-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>
css没有父元素选择器，只有子元素选择器h1
>
strong，选择第一个
h1
下面的strong
元素；兄弟选择器h1
+
p
选择紧接在另一个元素后的元素，而且二者有相同的父元素；
父元素可以使用jquery，$(".class:parent")
或
$(".class").parent()
