1.双击打开HBuilderX工具，创建一个新的HTML5静态页面，如下图zd所示:
2.在body标签元素中插入多个div标签，并用div将它们嵌套在div中，如下图所示:
3.在标题标签下面添加一个样式，设置全局版本的样式，并使用*符号，如下图所示:
4.保存代码并打开浏览器查看页面效果。可以在页面上找到背景颜色，如下图所示:
5.使用body标签选择器设置宽度、字体属性、字体大小等属性，如下图所示:
6.最后，使用body标签内部的div选择器来设置div标签样式，并添加边框和内外边的权重距离，如下图所示:
父级就是上一层，而这层就称为子级。子是可以继承父的属性的，这就是继承性。比如如下代码：<div id="div1">
<div id="div2">
</div>
</div>
这里div1就是父层，div2就是子层。
这个用纯css是不可能实现的，因为css不存在父选择器，只能由上往下选择，不能上溯。这种设置是合情合理的，否则的话如果在一个层次很深的css选择器中存在父级（或祖先级）选择器，浏览器在渲染页面时很可能会陷入迷宫或死循环。
必须用js才能实现，比如（须引用jq）：
<div class="chose"><span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<script>
$(function(){
$(".chose").on("mouseover","span",function(){
$(this).parent().css("background","url(image"+$(this).text()+".jpg)")
})
})
</script>
这里使用的背景图片是image1.jpg、image2.jpg、image3.jpg、image4.jpg
