1.双击打开HBuilderX工具，创建一个新的HTML5静态页面，如下图zd所示:
2.在body标签元素中插入多个div标签，并用div将它们嵌套在div中，如下图所示:
3.在标题标签下面添加一个样式，设置全局版本的样式，并使用*符号，如下图所示:
4.保存代码并打开浏览器查看页面效果。可以在页面上找到背景颜色，如下图所示:
5.使用body标签选择器设置宽度、字体属性、字体大小等属性，如下图所示:
6.最后，使用body标签内部的div选择器来设置div标签样式，并添加边框和内外边的权重距离，如下图所示:
虽然说至今尚无浏览器支持原生的父选择器效果，但是，我们是可以通过其他手段来实现父选择器效果的，虽说不是100%完全，但是，一般的项目需求都是可以满足的，如何实现呢？如果用一句话解释原理就是“把兄弟元素作为祖先元素使用”。这里介绍的“父选择器”技术，涉及多个技术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>
